Angular2：http.get 返回“请求的资源上不存在‘Access-Control-Allow-Origin’标头。”

Posted 2023-03-03

【中文标题】Angular2：http.get 返回“请求的资源上不存在‘Access-Control-Allow-Origin’标头。”

【英文标题】：Angular2: http.get returns "No 'Access-Control-Allow-Origin' header is present on the requested resource."

【发布时间】：2016-12-19 13:09:56

【问题描述】：

我收到以下错误：

对预检请求的响应未通过访问控制检查：否 请求中存在“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>

谢谢！

【参考方案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/

【讨论】：

他们提到问题是服务器在预先请求的响应中不包含标头，但他们没有提到如何做到这一点？另外，我认为 app.UseCors(CorsOptions.AllowAll);会解决这个问题吗？

【参考方案2】：

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

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

您可以在ApplicationOAuthProvider.cs 中再做一件事在GrantResourceOwnerCredentials 方法中添加这一行

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

【讨论】：

我认为这适用于 Microsoft.AspNet.WebApi.Cors，我正在使用 Microsoft.Owin.Cors。很抱歉遗漏了这个细节。我会相应地更新问题。

我正在使用 System.Web.Http.Cors；好的