[英]CORS error - No 'Access-Control-Allow-Origin' header is present on the requested resource
I am using an Angular front end to connect to a WEB API 2 backend. 我正在使用Angular前端连接到WEB API 2后端。 The failing use case is the following.
失败的用例如下。 When a user registers, on successful registration, they must be logged into the system and be redirected to a new page to collect further information.
用户注册后,成功注册后,必须将他们登录到系统中并重定向到新页面以收集更多信息。 I am using TOKENS for authentication.
我正在使用令牌进行身份验证。
I have enabled CORS in the WebAPI config: 我已经在WebAPI配置中启用了CORS:
var cors = new EnableCorsAttribute("http://localhost:7812", "*", "*");
config.EnableCors(cors);
The registration request is successful and the response headers have the required CORS headers: 注册请求成功,并且响应标头具有必需的CORS标头:
**Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:7812**
Content-Length:0
Date:Sun, 24 Aug 2014 09:31:55 GMT
Server:Microsoft-IIS/8.0
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcVGVzdGluZ1xNYWx0QXBhcnRtZW50c1xNYWx0YXBhcnRtZW50cy5BUElcTWFsdGFwYXJ0bWVudHMuQVBJXGFwaVxhY2NvdW50XHJlZ2lzdGVy?=
In the next step I attempt to log in the user to the system. 在下一步中,我尝试将用户登录到系统。 As part of the login, the front end requests a TOKEN from the server at
Request URL:http://localhost:7802/token
. 作为登录的一部分,前端通过
Request URL:http://localhost:7802/token
向服务器Request URL:http://localhost:7802/token
。 The request header once again sends a Origin header Origin:http://localhost:7812
but this time I get the error : XMLHttpRequest cannot load http://localhost:7802/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7812' is therefore not allowed access.
请求标头再次发送一个Origin标头
Origin:http://localhost:7812
但是这次我收到错误消息: XMLHttpRequest cannot load http://localhost:7802/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7812' is therefore not allowed access.
XMLHttpRequest cannot load http://localhost:7802/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7812' is therefore not allowed access.
Anyone have any ideas? 有人有想法么?
When dealing with CORS, we need to keep in mind that there may be two requests sent by the browsers for a non GET request. 在处理CORS时,我们需要记住,对于非GET请求,浏览器可能会发送两个请求。 There is usually the preflight (OPTIONS) request and then the actual request (POST).
通常会有一个预检(OPTIONS)请求,然后是实际的请求(POST)。 During the preflight requests, the server needs to add the Access-Control-Allow-Origin header with the value matching the request Origin header.
在预检请求期间,服务器需要添加Access-Control-Allow-Origin标头,其值与请求的Origin标头匹配。 This authorizes the subsequent request to be sent.
这授权随后的请求被发送。
For the subsequent/actual request, the server also needs to add the Access-Control-Allow-Origin header. 对于后续/实际请求,服务器还需要添加Access-Control-Allow-Origin标头。 Otherwise, this request fails.
否则,该请求将失败。
When using the OWIN OAuthAuthorizationServerProvider, we need to customize the MatchEndpoint handler to manage the header logic. 使用OWIN OAuthAuthorizationServerProvider时,我们需要自定义MatchEndpoint处理程序以管理标头逻辑。 This handler is executed before validate client authentication.
在验证客户端身份验证之前执行此处理程序。
For more background information, look at this link: http://www.ozkary.com/2016/04/web-api-owin-cors-handling-no-access.html 有关更多背景信息,请查看以下链接: http : //www.ozkary.com/2016/04/web-api-owin-cors-handling-no-access.html
It's because of Preflighted requests . 这是因为预检请求 。
Read these articles for solutions: 阅读以下文章以获取解决方案:
I believe you got two problems : 我相信您有两个问题:
1- With Web API 2, you need to add the header manually when you grant the bearer token. 1-使用Web API 2,您在授予不记名令牌时需要手动添加标头。
2- Your data needs to be url encoded, so you need to intercept the $http post message to encode the data. 2-您的数据需要进行url编码,因此您需要拦截$ http post消息以对数据进行编码。
refer to my article which I use Web API 2 from an AngularJS client side. 请参阅我从AngularJS客户端使用Web API 2的文章。
http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En
Hope that helps. 希望能有所帮助。
Use these line in web.config : 在web.config中使用以下行:
<system.webServer>
<modules>
<remove name="WebDAVModule" />
...
</modules>
<handlers>
<remove name="WebDAV" />
...
</handlers>
</system.webServer>
Its fixes my problem, may be it also help you. 它解决了我的问题,可能还可以帮助您。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.