带有 Angular2 的 ASP MVC Web api - Http 标头访问控制答案

【问题标题】：ASP MVC Web api with Angular2 - Http header Access-Control带有 Angular2 的 ASP MVC Web api - Http 标头访问控制
【发布时间】：2017-12-03 23:49:05
【问题描述】：

我有 Angular2 和 ASP MVC 休息服务器的休息应用程序，但我遇到了通信问题。当我发送 get 时，我收到此错误：

请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:4200' 因此不允许访问。

当我将 Access-Control-Allow-Origin 添加到请求时，我收到此错误：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:4200' 不允许访问。响应的 HTTP 状态代码为 404。

这是我的代码：

let headers = new Headers({ 'Access-Control-Allow-Origin': '*' })
    this.http.get("http://localhost/App/Users", { withCredentials: true, headers: headers })
      .subscribe(response => {
        console.log("A");
      }, error => {
        console.log(error);
      });

在 web.config 中启用了 Windows 身份验证。问题出在哪里？

【问题讨论】：

如何在 web api 中启用 cors？

标签： angularjs asp.net-mvc asp.net-web-api

【解决方案1】：

这里的问题似乎是 CORS。当您使用 localhost 时，您的 Angular 和 WebAPI 使用不同的端口。（似乎它们是两个不同的项目）。要解决此问题，您可以使用“Install-Package Microsoft.AspNet.WebApi.Cors”安装 nuget 包，然后在 WebApiConfig 文件中简单地说“config.EnableCors()”。现在，您要向 angular 部分公开的 API 必须被告知应该在那里使用 CORS。所以你可以把属性放在你的控制器上，提到来源、标题和方法。之后它应该可以正常工作。如需更多参考，您可以查看此链接， https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

【讨论】：

【解决方案2】：

启用 cors add 时在服务器端：

corsAttr.SupportsCredentials = true;

在 MVC .net 上的 Application_Start 上像这样

var corsAttr = new EnableCorsAttribute("http://localhost:4200,http://domain1,http://domain2", "*", "*");
// Enable withCredentials
corsAttr.SupportsCredentials = true;
config.EnableCors(corsAttr);

【讨论】：