c# - mvc - ASP.NET Core CORS WebAPI: sin encabezado Access-Control-Allow-Origin

enable cors mvc core

Question

Implementé mi API web ASP.NET Core en Azure, y puedo acceder a sus puntos finales utilizando Swagger o un depurador web como Fiddler. En ambos casos (mismo origen en Swagger, diferente origen utilizando Fiddler desde mi computadora), al acceder a las API obtengo el resultado esperado, con CORS habilitado de la siguiente manera en mi Startup.cs :

1. agregar services.AddCors(); para ConfigureServices .

2. agregue el middleware a Configure : soy consciente de que el orden aquí importa ( ASP.NET 5: Access-Control-Allow-Origin en respuesta ), así que coloco esta llamada en la parte superior del método, solo precedida por el registro o el diagnóstico middleware; aquí está mi método completo:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
    ILoggerFactory loggerFactory,
    IDatabaseInitializer databaseInitializer)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();
    loggerFactory.AddNLog();

    // to serve up index.html
    app.UseDefaultFiles();
    app.UseStaticFiles();

    // http://www.talkingdotnet.com/aspnet-core-diagnostics-middleware-error-handling/
    app.UseDeveloperExceptionPage();
    app.UseDatabaseErrorPage();

    // CORS
    // https://docs.asp.net/en/latest/security/cors.html
    app.UseCors(builder =>
            builder.WithOrigins("http://localhost:4200", "http://www.myclientserver.com")
                .AllowAnyHeader()
                .AllowAnyMethod());

    app.UseOAuthValidation();
    app.UseOpenIddict();
    app.UseMvc();

    databaseInitializer.Seed().GetAwaiter().GetResult();
    env.ConfigureNLog("nlog.config");

    // swagger
    app.UseSwagger();
    app.UseSwaggerUi();
}

El CORS localhost se usa durante el desarrollo y se refiere a una aplicación CLI de Angular2. CORS está funcionando bien localmente, y mi cliente y las aplicaciones de API están en diferentes puertos en el mismo servidor local, por lo que este es un origen cruzado "verdadero" (estoy comentando esto debido a las sugerencias que encontré aquí: https://weblog.west-wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas : el autor de la publicación advierte que el encabezado CORS en la respuesta se envía solo cuando es realmente necesario, es decir, en verdaderos entornos de origen cruzado )

Usando Fiddler puedo acceder con éxito a la API remota, pero obtengo el encabezado NO Access-Control-Allow-Origin . Por lo tanto, al llamar a la API desde el navegador (a través de mi aplicación cliente) la solicitud AJAX falla, incluso si el servidor devuelve 200. Ejemplo de solicitud de Fiddler (éxito):

GET http://mywebapisiteurl/api/values HTTP/1.1
User-Agent: Fiddler

respuesta:

HTTP/1.1 200 OK
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/8.0
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=prinapi.azurewebsites.net
Date: Thu, 01 Dec 2016 10:30:19 GMT

["value1","value2"]

Al intentar acceder a la API remota implementada en Azure, mi aplicación cliente siempre falla su solicitud AJAX con error:

No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin ''http://www.myclientserver.com'' is therefore not allowed access.

Aquí hay un código de cliente de muestra que usa Angular2 (usando Plunker):

import {Component, NgModule} from ''@angular/core'';
import {BrowserModule} from ''@angular/platform-browser'';
import { Http, Headers, Response } from ''@angular/http'';
import { HttpModule } from ''@angular/http'';

@Component({
  selector: ''my-app'',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="test()">test</button>
    </div>
  `,
})
export class App {
  name:string;
  constructor(private _http: Http) {
    this.name = ''Angular2''
  }
  public test() {
    this._http.get(''http://theapisiteurlhere/api/values'',
    {
        headers: new Headers({
          ''Content-Type'': ''application/json''
        })
    })
    .subscribe(
      (data: any) => {
        console.log(data);
      },
      error => {
        console.log(error);
      });
  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

En resumen, parece que el servidor ASPNET API no está devolviendo los encabezados CORS esperados y, por lo tanto, falla mi servidor basado en navegador alojado en un origen diferente. Sin embargo, la configuración de CORS parece estar bien, al menos a juzgar por la documentación citada anteriormente; Estoy en un verdadero entorno de origen cruzado; y coloco el middleware antes que los otros. Tal vez me falta algo obvio, pero buscar en Google estas son todas las recomendaciones que encontré. ¿Alguna pista?

ACTUALIZAR

En respuesta a @ Daniel JG: la solicitud / respuesta de fiddler es exitosa:

GET http://theapiserver/api/values HTTP/1.1
User-Agent: Fiddler
Host: theapiserver
Origin: http://theappserver/apps/prin

y:

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: http://theappserver/apps/prin
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=theapiserver
Date: Thu, 01 Dec 2016 14:15:21 GMT
Content-Length: 19

["value1","value2"]

La solicitud / respuesta de Angular2 (Plunker) falla, como se informó. Al inspeccionar el tráfico de red, puedo ver solo la solicitud de verificación previa:

OPTIONS http://theapiserver/api/values HTTP/1.1
Host: theapiserver
Proxy-Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://run.plnkr.co
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://run.plnkr.co/h17wYofXGFuTy2Oh/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,it;q=0.6

HTTP/1.1 204 No Content
Server: Microsoft-IIS/8.0
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=theapiserver
Date: Thu, 01 Dec 2016 14:23:02 GMT

Después de esto, la solicitud falla y no hay más tráfico para el servidor. El problema informado es que la Response to preflight request doesn''t pass access control check , nuevamente debido a la falta del encabezado en la respuesta:

XMLHttpRequest cannot load http://theapiserver/api/values. Response to preflight request doesn''t pass access control check: No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin ''http://run.plnkr.co'' is therefore not allowed access.

Answer 1

Agregar el método .AllowAnyHeader () podría solucionar su problema

app.UseCors(builder => builder.WithOrigins("http://localhost:4200")
                              .AllowAnyMethod()
                              .AllowAnyHeader());

Answer 2

Agregar el método .AllowAnyOrigin () podría solucionar su problema

app.UseCors(builder =>
    builder.WithOrigins("http://localhost:4200", "http://www.myclientserver.com")
        .AllowAnyOrigin()
        .AllowAnyHeader()
        .AllowAnyMethod());

Answer 3

Aquí está la respuesta a mi propia pregunta, copiada de los comentarios: no había notado que en el portal de Azure hay una sección de CORS. Si no ingreso ningún origen permitido allí, mi configuración basada en código parece ser totalmente irrelevante. Esto me parece extraño, ya que me veo obligado a duplicar las URL aquí, pero una vez que agregué * a los orígenes permitidos, funcionó.

Answer 4

En caso de que seas perezoso para entender qué magia UseCors hace detrás de la escena.

    // Summary:
    //     Adds a CORS middleware to your web application pipeline to allow cross domain
    //     requests.
    //
    // Parameters:
    //   app:
    //     The IApplicationBuilder passed to your Configure method.
    //
    //   configurePolicy:
    //     A delegate which can use a policy builder to build a policy.
    //
    // Returns:
    //     The original app parameter

Ahora puedes usar las siguientes líneas de manera segura

    app.UseCors(builder =>
                    builder.WithOrigins("http://localhost:53593")
                        .AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowAnyMethod());

Answer 5

Proyecto WebApi ---> Haga clic derecho en Referencias ---> Buscar núcleo en la sección Administrar paquetes de Nuget. Agregue Microsoft.AspNet.WebApi.Cors al proyecto instalando

Agregue el siguiente código al archivo WebApi.Config en la carpeta App_Start en el proyecto.

var cors = new EnableCorsAttribute (" ", " ", "*"); config.EnableCors (cors);

enter image description here

enter image description here