webapiconfig origin net mvc enable control asp allow angularjs asp.net-mvc cors preflight

angularjs - origin - enable cors web config



Falta el token ''access-control-allow-headers'' en el encabezado CORS ''Access-Control-Allow-Headers'' del canal de verificación previa CORS (2)

Tengo dos proyectos VS: uno que expone los controladores MVC5 y el otro es un cliente angular. Quiero que el cliente angular pueda consultar los controladores. Leí numerosos hilos y probé lo siguiente:

  • Agregué esto en la configuración web del servidor:

    <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> <system.webServer>

  • Creé y usé el siguiente filtro en la acción del controlador:

    public class AllowCrossSiteJsonAttribute : ActionFilterAttribute { public override void OnActionExecuting(ActionExecutingContext filterContext) { filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*"); base.OnActionExecuting(filterContext); } }

  • En el cliente angular, creé el siguiente interceptor:

    app.factory("CORSInterceptor", [ function() { return { request: function(config) { config.headers["Access-Control-Allow-Origin"] = "*"; config.headers["Access-Control-Allow-Methods"] = "GET, POST, OPTIONS"; config.headers["Access-Control-Allow-Headers"] = "Content-Type"; config.headers["Access-Control-Request-Headers"] = "X-Requested-With, accept, content-type"; return config; } }; } ]); app.config(["$httpProvider", function ($httpProvider) { $httpProvider.interceptors.push("CORSInterceptor"); }]);

Según Firebug, esto se traduce en la siguiente solicitud:

OPTIONS //Login/Connect HTTP/1.1 Host: localhost:49815 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate Origin: http://localhost:50739 Access-Control-Request-Method: POST Access-Control-Request-Headers: access-control-allow-headers,access-control-allow-origin,content-type Connection: keep-alive Pragma: no-cache Cache-Control: no-cache

Y la siguiente respuesta:

HTTP/1.1 200 OK Allow: OPTIONS, TRACE, GET, HEAD, POST Server: Microsoft-IIS/10.0 Public: OPTIONS, TRACE, GET, HEAD, POST X-SourceFiles: =?UTF-8?B?RDpcVEZTXElVV2ViXEdhcE5ldFNlcnZlclxBU1BTZXJ2aWNlc1xMb2dpblxDb25uZWN0?= Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: * Access-Control-Request-Headers: X-Requested-With, accept, content-type Date: Tue, 01 Sep 2015 13:05:23 GMT Content-Length: 0

Y aún así, Firefox bloquea la solicitud con el siguiente mensaje:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:49815//Login/Connect. (Reason: missing token ''access-control-allow-headers'' in CORS header ''Access-Control-Allow-Headers'' from CORS preflight channel).


A menudo, los hilos que leí sugerían varios pasos de configuración innecesarios, lo que creaba confusión. En realidad es muy simple ...

Con el simple propósito de enviar una solicitud entre sitios, desde un cliente angular, a un controlador ASP:

  • No se requieren interceptores angulares.
  • No se requieren filtros personalizados en el lado del servidor.
  • La única modificación obligatoria es agregar esto en web.config del servidor

    <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type"/> </customHeaders> </httpProtocol> </system.webServer>


El problema es que el Access-Control-Allow-Headers no permite comodines. (El único encabezado Access-Control-Allow-Origin que permite el comodín es el Access-Control-Allow-Origin ).

Por lo tanto, el valor debe enumerar explícitamente los nombres de los encabezados que desea permitir. Reemplace el * con algunos nombres de encabezado reales y luego creo que encontrará que funciona.