Hola usuario de nuestro sitio web, descubrimos la solución a tu búsqueda, continúa leyendo y la hallarás un poco más abajo.

Solución:

Posibles problemas:

• En tus startup.cs.Configure() método, hace app.UseCors() preceder app.useMVC()?
• ¿La URL de solicitud Http contiene una barra diagonal? (/)?
• ¿La solicitud Http incluye credenciales?
• ¿El navegador recibe una respuesta Http de la API?
• ¿La respuesta incluye un encabezado ‘Access-Control-Allow-Origin’?
• Cuando envía la solicitud de Postman, ¿la respuesta Http incluye el encabezado ‘Access-Control-Allow-Origin’, así como un cuerpo que contiene los datos?

Gotchas

Firefox requiere que se instale un certificado para su API para enviar una solicitud Http utilizando el protocolo HTTPS.

Pruebe su API con Postman y la herramienta de desarrollo de su navegador. Observe 2 solicitudes Http. El Http 200 es un “pre-vuelo” para ver qué opciones de CORS están disponibles.

• Si su API (.NET) arroja un HTTP 500 (Internal Server Error), devolverá una página de excepción del desarrollador y Postman mostrará un “no ‘Access-Control-Allow-Origin’ header is present on the requested resource” mensaje – esto es engañoso.
• El problema real en este caso es que la página de excepción del desarrollador no se puede devolver desde el servidor a un cliente (navegador) que se ejecuta en un origen diferente.

me gustaría respetuosamente señale lo siguiente:

• los Especificación CORS establece que establecer orígenes en ‘*’ (todos los orígenes) no es válido si el encabezado Access-Control-Allow-Credentials está presente.
• AllowAnyOrigin() no se recomienda en producción a menos que tenga la intención de permitir que alguien utilice su API Y no implementará las credenciales.
• No es necesario configurar CORS en el nivel del controlador con el EnableCors attribute al utilizar múltiples políticas CORS.
• Configurar varias políticas CORS con ASP.NET Core es fácil (ver tutorial a continuación)

Vale la pena revisar los siguientes artículos:

ASP.NET Core 2.2 no permite permitir credenciales con AllowAnyOrigin ()

Habilitar solicitudes de origen cruzado (CORS) en ASP.NET Core

key puntos (tldr;):

• El middleware CORS debe preceder a cualquier punto final definido en la configuración de su aplicación.
• La URL debe especificarse sin un barra diagonal (/).
• Si el navegador envía credenciales pero la respuesta no incluye una Acceso-Control-Permitir-Credenciales encabezado, el navegador no expone la respuesta a la aplicación y la solicitud de origen cruzado falla.
• La especificación CORS también establece que establecer orígenes en “*” (todos los orígenes) no es válido si el encabezado Access-Control-Allow-Credentials está presente.
• Si un navegador es compatible con CORS, establece estos encabezados automáticamente para solicitudes de origen cruzado.
• Si la respuesta no incluye el Acceso-Control-Permitir-Origen encabezado, la solicitud de origen cruzado falla.

---

Tutorial de CORS: (2) Clientes angulares + ASP.NET Core

1. Crear una solución de Visual Studio

   md c:sa
   cd c:sa
   c:sa>dotnet new sln -n solutionName
   

2. Crear proyecto ASP.NET Core

   c:sa>md s
   c:sa>cd s
   c:sas>dotnet new webapi -o api -n api
   

3. Configuración de lanzamiento de API y configuración de CORS

launchSettings.json

Clonar perfil de desarrollo a perfil de ensayo

"$schema": "http://json.schemastore.org/launchsettings.json",
"iisSettings": 
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iis": 
    "applicationUrl": "http://localhost:myIISApiPortNumber",
    "sslPort": myIISApiSSLPortNumber
,
"iisExpress": 
    "applicationUrl": "http://localhost:myIISExpressApiPortNumber",
    "sslPort": myIISExpressApiSSLPortNumber

,
"profiles": 
"Development (IIS Express)": 
    "commandName": "IISExpress",
    "launchBrowser": true,
    "launchUrl": "api/values",
    "environmentVariables": 
    "ASPNETCORE_ENVIRONMENT": "Development"
    
,
"Staging (IIS Express)": 
    "commandName": "IISExpress",
    "launchBrowser": true,
    "launchUrl": "api/values",
    "applicationUrl": "https://localhost:myIISExpressApiSSLPortNumber;http://localhost:myIISExpressApiPortNumber",
    "environmentVariables": 
    "ASPNETCORE_ENVIRONMENT": "Staging"
    
,
"Production (IIS)": 
    "commandName": "IIS",
    "launchBrowser": true,
    "launchUrl": "api/values",
    "environmentVariables": 
    "ASPNETCORE_ENVIRONMENT": "Production"
    ,
    "applicationUrl": "https:localhost:myIISApiSSLPortNumber;http://localhost:myIISApiPortNumber"

startup.cs

Agregar configuración CORS

public class Startup

    public IConfiguration Configuration  get; 

    public IServiceCollection _services  get; private set; 

    public Startup(IConfiguration configuration)
    
        Configuration = configuration;
    

    public void ConfigureServices(IServiceCollection services)
    
        _services = services;
        RegisterCorsPolicies();
        services.AddMvc()
                .SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    
        if (env.IsDevelopment())
        
            app.UseCors("DevelopmentCorsPolicy");
            app.UseDeveloperExceptionPage();
        
        else if (env.IsStaging())
        
            app.UseCors("StagingCorsPolicy");
        
        else
        
            app.UseCors("ProductionCorsPolicy");
            app.UseHsts();
        

        app.UseHttpsRedirection();
        app.UseMvc(); // CORS middleware must precede any defined endpoints
    

    private void RegisterCorsPolicies()
    
        string[] localHostOrigins = new string[] 
        "http://localhost:4200", "http://localhost:3200";

        string[] stagingHostOrigins= new string[] 
        "http://localhost:4200";

        string[] productionHostOrigins = new string[] 
        "http://yourdomain.net", "http://www.yourdomain.net",
        "https://yourdomain.net", "https://www.yourdomain.net";

        _services.AddCors(options =>    // CORS middleware must precede any defined endpoints
        
            options.AddPolicy("DevelopmentCorsPolicy", builder =>
            
                builder.WithOrigins(localHostOrigins)
                        .AllowAnyHeader().AllowAnyMethod();
            );
            options.AddPolicy("StagingCorsPolicy", builder =>
            
                builder.WithOrigins(stagingHostOrigins)
                        .AllowAnyHeader().AllowAnyMethod();
            );
            options.AddPolicy("ProductionCorsPolicy", builder =>
            
                builder.WithOrigins(productionHostOrigins)
                        .AllowAnyHeader().AllowAnyMethod();
            );
        //options.AddPolicy("AllowAllOrigins",
        //    builder =>
        //    
        // WARNING: ASP.NET Core 2.2 does not permit allowing credentials with AllowAnyOrigin() 
        // cref: https://docs.microsoft.com/en-us/aspnet/core/migration/21-to-22?view=aspnetcore-2.2&tabs=visual-studio
            //        builder.AllowAnyOrigin()
            //               .AllowAnyHeader().AllowAnyMethod();
            //    );
            //options.AddPolicy("AllowSpecificMethods",
            //    builder =>
            //    
            //        builder.WithOrigins(productionHostOrigins)
            //               .WithMethods("GET", "POST", "HEAD");
            //    );
            //options.AddPolicy("AllowSpecificHeaders",
            //    builder =>
            //    
            //        builder.WithOrigins(productionHostOrigins)
            //               .WithHeaders("accept", "content-type", "origin", "x-custom-header");
            //    );
            //options.AddPolicy("ExposeResponseHeaders",
            //    builder =>
            //    
            //        builder.WithOrigins(productionHostOrigins)
            //               .WithExposedHeaders("x-custom-header");
            //    );
            //options.AddPolicy("AllowCredentials",
            // WARNING: ASP.NET Core 2.2 does not permit allowing credentials with AllowAnyOrigin() cref: https://docs.microsoft.com/en-us/aspnet/core/migration/21-to-22?view=aspnetcore-2.2&tabs=visual-studio
            //    builder =>
            //    
            //        builder.WithOrigins(productionHostOrigins)
            //               .AllowCredentials();
            //    );
            //options.AddPolicy("SetPreflightExpiration",
            //    builder =>
            //    
            //        builder.WithOrigins(productionHostOrigins)
            //               .SetPreflightMaxAge(TimeSpan.FromSeconds(2520));
            //    );
        );
    

4. Comience a depurar API con Perfil de desarrollo (IIS Express)

Establecer punto de interrupción en ValuesController.Get()

5. Prueba API con Postman:

   https://localhost:myApiPortNumber/api/values

   • Acceso-Control-Permitir-Origen el encabezado y los valores deben estar en respuesta

6. Crear aplicación angular

   c:sas>ng new Spa1 --routing (will automatically create Spa folder)
   

7. Iniciar la aplicación Spa1

   c:sas>cd Spa1
   c:sasSpa1>Ng serve
   

8. Vaya a http: // localhost: 4200 /

   • Spa1 debería iniciarse correctamente

9. Implementar COR en Spa1

app.module.ts

• Importar HttpClientModule

import  HttpClientModule  from '@angular/common/http';

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';

import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

app.component.ts

• Importar HttpClient

• Agregar getValues() método con solicitud CORS

import  Component, OnInit  from '@angular/core';
import  HttpClient  from '@angular/common/http';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)

export class AppComponent implements OnInit 
  title = 'Spa1';
  values: any;
  apiUrl: string = environment.apiUrl;
  valuesUrl = this.apiUrl + "values";

  constructor(private http: HttpClient)  

  ngOnInit() 
    this.getValues();
  
  getValues() 
    this.http.get(this.valuesUrl).subscribe(response => 
      this.values = response;
  , error => 
  console.log(error);
);

app.component.html

  

    Welcome to  title !
  

Values

  value

environment.ts

export const environment = 
  production: false,
  apiUrl: 'https://localhost:myApiPortNumber/api/'
;

10. Iniciar la aplicación Spa1

    c:sasSpa1>Ng serve
    

11. Vaya a http: // localhost: 4200 /

    • Chrome y Edge: debería realizar correctamente las solicitudes de COR ahora
    • Safari: no lo he probado
    • Firefox: puede bloquear la solicitud debido a un certificado que no es de confianza.

Una forma de corregir el bloqueo de Firefox:

FireFox | Opciones | Privacidad y seguridad | Seguridad | Certificados
[View Certificates] :

Administrador de certificados | [Add Exception]:

   add localhost

---

Prueba CORS

1. Clonar Spa1

   c:sas>xcopy /s /i Spa1 Spa2
   

2. Refactorizar el título de Spa2

app.component.ts

export class AppComponent implements OnInit 
  title = 'Spa2';

3. Inicie la aplicación Spa2 en puerto 3200

   c:sasSpa2>ng serve --port 3200
   

4. Vaya a http: // localhost: 3200 /

   • Los valores array debe representar en la página web

5. Detener la depuración de API con perfil de desarrollo (IIS Express)

6. Comience a depurar API con Perfil de puesta en escena (IIS Express)

7. Vaya a http: // localhost: 4200 /

   • Los valores array debería rendir en la página web.

8. Vaya a http: // localhost: 3200 /

   • Los valores array no debería rendir en la página web.

9. inspeccione la respuesta Http con las herramientas del desarrollador:

   • Acceso-Control-Permitir-Origen el encabezado y los valores no deben estar en respuesta

Agregue el siguiente fragmento de código en el método ConfigureServices. Edite esto para permitir solo encabezados personalizados.

// Add service and create Policy with options
        services.AddCors(options =>
        
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials()
                );
        );

Agregue lo siguiente en el método Configurar

app.UseCors("CorsPolicy");

Agregar ‘EnableCors’ attribute al controlador.

[EnableCors("CorsPolicy")]

Registrar cors en servicios

services.AddCors(options =>
            
                options.AddPolicy("CorsPolicy",
                    builder => builder
                    .SetIsOriginAllowed((host) => true)
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials());
            );

agregar middleware cors

app.UseCors("CorsPolicy");

Agradecemos que desees añadir valor a nuestra información dando tu experiencia en las acotaciones.

---

---

Utiliza Nuestro Buscador