Question

我一直在花费大量时间寻找一种方法来使前端Web应用程序（Angular）能够访问我的Asp.NET MVC（控制器），但它显示以下错误：

在以下位置访问XMLHttpRequest 原产地的“ https://localhost:44344/Authentication/SignIn” “ http://localhost:4200”已被CORS政策屏蔽：对飞行前请求未通过访问控制检查：它没有 HTTP正常状态。

角度网址：http://localhost:4200/login?returnUrl=%2F

MVC URL：https://localhost:44344/

这也是我添加到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>

我还向主控制器添加了以下行：

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

但是错误是相同的。

这是控件的初始化：

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

有人可以帮我吗？

Answer 1

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

var cors = new EnableCorsAttribute（来源：“ ”，标头：“ ”，方法：“ *”）；

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 here

也跟踪浏览器支持

因此更改此行

[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();
        }
    }

Answer 3

Rick Strahl 在他的web blog中对此做了很好的解释，问题是： Angular的默认工作环境在一个单独的端口上运行开发服务器，该端口实际上是一个单独的域，对于API调用，所有返回主ASP.NET站点的调用实际上都是跨域调用。遗憾的是，这些调用失败了，并且在仔细检查后发现，原因是未发送CORS标头。因此解决方案是：

// Add service and create Policy with options
public void ConfigureServices(IServiceCollection services)
{   
    services.AddCors(options =>
    {
        options.AddPolicy("CorsPolicy",
            builder => builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials() );
    });        
    services.AddMvc(); 
}

，然后可以将其全局分配给所有控制器，也可以如下所述分配给各个控制器。

全局分配

public void Configure(IApplicationBuilder app){  

    // global policy - assign here or on each controller

    app.UseCors("CorsPolicy");

    // IMPORTANT: Make sure UseCors() is called BEFORE this
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

单独分配

[EnableCors("CorsPolicy")]
public class TestController : Controller

您可能会遇到此错误：

CORS协议不允许同时指定通配符（任何）来源和凭据。如果需要支持凭据，则通过列出各个来源来配置策略

只需从服务中删除allowCredentials（）。

希望有帮助。

MVC Web API Angular App（CORS策略已阻止“ http：// localhost：4200”）

3 个答案: