Angular2：http.get返回“No'Access-Control-Allow-Origin'标头出现在请求的资源上。”

Question

我收到以下错误：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

从我的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[] { "*" });