MVC Web API Angular App ('http://localhost:4200' has been blocked by CORS policy)

Question

I have been spending hours and hours about looking a way to enable my front end web app (Angular) to access my Asp.NET MVC (Controller) but it displays the following error:

Access to XMLHttpRequest at 'https://localhost:44344/Authentication/SignIn' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Angular URL: http://localhost:4200/login?returnUrl=%2F

MVC URL: https://localhost:44344/

Here also what I have added to my web.config

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="*" />
    <add name="Content-Type" value="application/json"/>

    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

I have also added the following line to the main controller:

 [EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

But the error es the same.

Here is the init of the controlles:

    [HttpPost]
    [AllowAnonymous]
    [DisableCors]
    public JsonResult SignUp(HF_Accnt_Access Company)

Can somebody help me out please.

Answer 1

将以下代码添加到 App_start 文件夹内 WebApiConfig.cs 文件中的 Register 方法中。

var cors = new EnableCorsAttribute(origins: " ", headers: " ", methods: "*");

config.EnableCors(cors);

注意：如果您添加任何跨源配置，请从那里删除。例如：从 web.config 文件中删除。添加下面的代码。

    public static void Register(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute(origins: "*", headers: "*", methods: "*");
        config.EnableCors(cors);
        
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }

Answer 2

并非所有浏览器都支持 Access-Control-Allow-Methods 的通配符。

MDN还在这里跟踪浏览器支持

所以改变这一行

[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

到

 [EnableCors(origins: "*", headers: "*", methods: "GET, POST, PUT, DELETE, OPTIONS")]

并且您必须在 global.asax 中单独处理“OPTIONS”方法，因为浏览器将向服务器发送飞行前请求

 protected void Application_BeginRequest()
    {
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, OPTIONS");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
    }