Question

我收到以下错误：

对预检请求的响应未通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。

从我的angular2应用程序向我的web api发出以下请求时：

     return this.http.get("http://localhost/api/test", { headers })
    .map(res => this.extractData(res))
    .catch(this.handleError);

一些注意事项：

我正在使用Microsoft.Owin.Cors
请求工作正常，如果他们不包含标题。这个包含用于身份验证的标头。
我可以使用Chrome发出请求。
Microsoft.Owin.Cors安装在解决方案中
app.UseCors(CorsOptions.AllowAll);位于startup.cs

以下内容包含在web.config文件中：

 <system.webServer>
<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" />
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionControllerv4.0" />
</handlers>

谢谢！

Answer 1

我认为问题在于您没有在服务器端配置预检请求（对于OPTIONS方法）。

CORS有两种请求：

简单请求。如果我们使用HTTP GET，HEAD和POST方法，则此用例适用。对于POST方法，仅支持具有以下值的内容类型：text / plain，application / x-www-form-urlencoded和multipart / form-data。
预检请求。当“简单请求”用例不适用时，会发出第一个请求（使用HTTP OPTIONS方法），以检查在跨域请求的上下文中可以执行的操作。

添加标题时，您可以从简单请求切换到预检请求。因此，OPTIONS请求在目标请求之前在引擎盖下执行。

有关详细信息，请参阅此文章：

http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Answer 2

将这些行添加到webapiconfig.cs文件

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

您可以在ApplicationOAuthProvider.cs中添加此行，在GrantResourceOwnerCredentials方法

中添加一行

context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });

Angular2：http.get返回＆＃34; No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。＆＃34;

2 个答案: