已启用CORS，但仍收到CORS错误

本文介绍了已启用CORS，但仍收到CORS错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试从API获取JSON对象，并且该API的开发人员表示他们刚刚启用了CORS，但我仍然遇到以下错误.

I'm trying to get a JSON object from an API and the devs for the API said they just enabled CORS but I'm stilling getting the bellow error.

XMLHttpRequest无法加载 example/data/action/getGame/9788578457657 .所请求的资源上没有"Access-Control-Allow-Origin"标头.因此，不允许访问来源" dev.our-domain.local .

XMLHttpRequest cannot load example/data/action/getGame/9788578457657. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'dev.our-domain.local' is therefore not allowed access.

我正在使用AngularJS通过以下方式在服务中获取JSON

I'm using AngularJS to get the JSON in a Service with

app.service("gameService", function ($http, $q) { function getGame(GameId) { var deferred = $q.defer() var url = 'example/data/action/getGame/' + gameId; // var url = 'jsonplaceholder.typicode/albums/' + gameId; // THIS WORKS $http({ method: 'GET', cache: true, url: url, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }). then(function(response) { //your code when success deferred.resolve(response); console.log('gameService HTTP CORS SUCCESS!'); }, function(response) { //your code when fails console.log('gameService HTTP CORS ERROR!'); // deferred.resolve(''); deferred.reject(response); }); return deferred.promise; } this.getGame = getGame; })

我的AngularJS服务可以通过启用了CORS的 jsonplaceholder 进行测试.

My AngularJS service works when I test it with jsonplaceholder which has CORS enabled.

我想念什么吗?

API开发人员说，两个CORS-Header已添加到data.service响应中，但我看不到它们.这是我curl沿JSON对象向下时在标题上看到的.

The API devs said that two CORS-Headers are added to data.service responses but I don't see them. This is what I see on the headers when I curl down the JSON object.

$ curl -X HEAD -i example/data/action/getGame/9788578457657 HTTP/1.1 200 OK Date: Wed, 14 Dec 2016 10:39:17 GMT Server: WildFly/8 Expires: Wed, 14 Dec 2016 10:39:17 GMT X-Powered-By: Undertow/1 X-dmg-elapsed-time: 20ms X-dmg-host-address: 1??.??.???.?? Vary: Accept-Encoding,Origin X-dmg-generated-time: Wed, 14 Dec 2016 10:39:17 GMT Content-Type: application/json;charset=UTF-8 Content-Language: en- X-dmg-node-name: defg_node_1 X-Varnish-Bereq-Backend: real_backend_foo_bar_uk X-Varnish-Bereq-Retries: 0 Last-Modified: Wed, 14 Dec 2016 10:39:17 GMT Cache-Control: public, max-age=300 X-Varnish: 6876870 Age: 0 Via: 1.1 varnish-v4 X-Varnish-Cache: MISS X-Varnish-Trimen: www.trimen X-Varnish-Served-By-Host: snarf.foo.uk X-Varnish-Served-By-IP: 100.100.10.80 X-Varnish-Pool: http_pages X-Varnish-Req-Backend-Hint: dead X-Varnish-Req-Restarts: 0 X-Varnish-Hash: /data/action/getGame/9788578457657 X-Varnish-Backend-Ourself: varnish_server_snarf_foo_uk X-DMG-Version: 6.20.51.2358 Accept-Ranges: none Connection: keep-alive

启用了CORS后，我应该看到的还是还有其他内容吗?

Is this what I should be seeing with CORS enabled or is there something more?

我是否需要在AngularJS服务中添加更多内容以启用启用Cors的http get，因为需要添加以下内容:

Do I need to add more to my AngularJS Service to http get with Cors enabled, as add in more to:

headers: { 'Content-Type': 'application/json;charset=UTF-8' }

更新

传递原点:@ t.niese

UPDATE

Passing Origin: in the header on my curl request as suggested by @t.niese

$ curl -H "Origin: our-production-domain/" --verbose \ > example/data/action/getGame/9788578457657 * Trying 1?.???.??.???... * Connected to example/ (1?.???.??.???) port 80 (#0) > GET /data/action/getGame/9788578457657 HTTP/1.1 > Host: example/ > User-Agent: curl/7.43.0 > Accept: */* > Origin: our-production-domain/ > < HTTP/1.1 200 OK < Date: Wed, 14 Dec 2016 11:05:24 GMT < Server: WildFly/8 < Expires: Wed, 14 Dec 2016 11:05:24 GMT < X-Powered-By: Undertow/1 < X-dmg-elapsed-time: 27ms < X-dmg-host-address: 1??.??.???.?? < Vary: Accept-Encoding,Origin < X-dmg-generated-time: Wed, 14 Dec 2016 11:05:24 GMT < Content-Type: application/json;charset=UTF-8 < Content-Language: en- < X-dmg-node-name: defg_node_1 < X-Varnish-Bereq-Backend: real_backend_foo_bar_uk < X-Varnish-Bereq-Retries: 0 < Last-Modified: Wed, 14 Dec 2016 11:05:24 GMT < Cache-Control: public, max-age=300 < X-Varnish: 6876870 < Age: 0 < Via: 1.1 varnish-v4 < X-Varnish-Cache: MISS < X-Varnish-Trimen: www.trimen < X-Varnish-Served-By-Host: snarf.foo.uk < X-Varnish-Served-By-IP: 100.100.10.80 < X-Varnish-Pool: http_pages < X-Varnish-Req-Backend-Hint: dead < X-Varnish-Req-Restarts: 0 < X-Varnish-Hash: /data/action/getGame/9788578457657 < X-Varnish-Backend-Ourself: varnish_server_snarf_foo_uk < X-DMG-Version: 6.20.51.2358 < Accept-Ranges: none < Transfer-Encoding: chunked < Connection: keep-alive < { "errorMessage" : null, "expiry" : "2016-12-14T11:05:24.379+0000", "data" : { // json object data here } * Connection #0 to host example/ left intact }

和..

$ curl -H "Origin: qa.our-qa-domain/" --verbose \ > example/data/action/getGame/9788578457657 * Trying 1?.???.??.???... * Connected to example/ (1?.???.??.???) port 80 (#0) > GET /data/action/getGame/9788578457657 HTTP/1.1 > Host: example/ > User-Agent: curl/7.43.0 > Accept: */* > Origin: qa.our-qa-domain/ > < HTTP/1.1 200 OK < Date: Wed, 14 Dec 2016 11:06:11 GMT < Server: WildFly/8 < Expires: Wed, 14 Dec 2016 11:06:11 GMT < X-Powered-By: Undertow/1 < X-dmg-elapsed-time: 18ms < X-dmg-host-address: 1??.??.???.?? < Vary: Accept-Encoding,Origin < X-dmg-generated-time: Wed, 14 Dec 2016 11:06:11 GMT < Content-Type: application/json;charset=UTF-8 < Content-Language: en- < X-dmg-node-name: defg_node_1 < X-Varnish-Bereq-Backend: real_backend_foo_bar_uk < X-Varnish-Bereq-Retries: 0 < Last-Modified: Wed, 14 Dec 2016 11:06:11 GMT < Cache-Control: public, max-age=300 < X-Varnish: 1343699 < Age: 0 < Via: 1.1 varnish-v4 < X-Varnish-Cache: MISS < X-Varnish-Trimen: www.trimen < X-Varnish-Served-By-Host: snarf.foo.uk < X-Varnish-Served-By-IP: 100.100.10.80 < X-Varnish-Pool: http_pages < X-Varnish-Req-Backend-Hint: dead < X-Varnish-Req-Restarts: 0 < X-Varnish-Hash: /data/action/getGame/9788578457657 < X-Varnish-Backend-Ourself: varnish_server_snarf_foo_uk < X-DMG-Version: 6.20.51.2358 < Accept-Ranges: none < Content-Length: 2988 < Connection: keep-alive < { "errorMessage" : null, "expiry" : "2016-12-14T11:06:11.927+0000", "data" : { // json data object here } * Connection #0 to host example/ left intact

和..

$ curl -H "Origin: dev.my-dev.local/" --verbose \ > example/data/action/getGame/9788578457657 * Trying 1?.???.??.???... * Connected to example/ (1?.???.??.???) port 80 (#0) > GET /data/action/getGame/9788578457657 HTTP/1.1 > Host: example/ > User-Agent: curl/7.43.0 > Accept: */* > Origin: dev.my-dev.local/ > < HTTP/1.1 200 OK < Date: Wed, 14 Dec 2016 11:07:10 GMT < Server: WildFly/8 < Expires: Wed, 14 Dec 2016 11:07:10 GMT < X-Powered-By: Undertow/1 < X-dmg-elapsed-time: 28ms < X-dmg-host-address: 1??.??.???.?? < Vary: Accept-Encoding,Origin < X-dmg-generated-time: Wed, 14 Dec 2016 11:07:10 GMT < Content-Type: application/json;charset=UTF-8 < Content-Language: en- < X-dmg-node-name: defg_node_1 < X-Varnish-Bereq-Backend: real_backend_foo_bar_uk < X-Varnish-Bereq-Retries: 0 < Last-Modified: Wed, 14 Dec 2016 11:07:10 GMT < Cache-Control: public, max-age=300 < X-Varnish: 6619151 < Age: 0 < Via: 1.1 varnish-v4 < X-Varnish-Cache: MISS < X-Varnish-Trimen: www.trimen < X-Varnish-Served-By-Host: snarf.foo.uk < X-Varnish-Served-By-IP: 100.100.10.80 < X-Varnish-Pool: http_pages < X-Varnish-Req-Backend-Hint: dead < X-Varnish-Req-Restarts: 0 < X-Varnish-Hash: /data/action/getGame/9788578457657 < X-Varnish-Backend-Ourself: varnish_server_snarf_foo_uk < X-DMG-Version: 6.20.51.2358 < Accept-Ranges: none < Content-Length: 2988 < Connection: keep-alive < { "errorMessage" : null, "expiry" : "2016-12-14T11:07:10.764+0000", "data" : { // JSON object data here } * Connection #0 to host example/ left intact }

第二次更新

我在Chrome中禁用了相同的来源策略，这些是来自Chrome的网络面板的JSON请求的标头.

2nd UPDATE

I disables same origin policy in Chrome and these are the headers to my JSON request from Chrome's network panel.

GET data/action/getGame/9788578457657 HTTP/1.1 Host: example Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: application/json, text/plain, */* Origin: dev.my-dev.local/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36 Referer: dev.my-dev.local//game/id-9788578457657 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 HTTP/1.1 200 OK Date: Wed, 14 Dec 2016 15:38:38 GMT Server: WildFly/8 Expires: Wed, 14 Dec 2016 15:38:38 GMT X-Powered-By: Undertow/1 X-dmg-elapsed-time: 25ms X-dmg-host-address: 172.16.0.70 Vary: Accept-Encoding,Origin X-dmg-generated-time: Wed, 14 Dec 2016 15:38:38 GMT Content-Type: application/json;charset=UTF-8 Content-Language: en- X-dmg-node-name: defg_node_1 Content-Encoding: gzip Content-Length: 1109 X-Varnish-Bereq-Backend: real_backend_foo_bar_uk X-Varnish-Bereq-Retries: 0 Last-Modified: Wed, 14 Dec 2016 15:38:38 GMT Cache-Control: public, max-age=300 X-Varnish: 6619151 Age: 0 Via: 1.1 varnish-v4 X-Varnish-Cache: MISS X-Varnish-Trimen: www.trimen X-Varnish-Served-By-Host: snarf.foo.uk X-Varnish-Served-By-IP: 100.100.10.80 X-Varnish-Pool: http_pages X-Varnish-Req-Backend-Hint: dead X-Varnish-Req-Restarts: 0 X-Varnish-Hash: /data/action/getGame/9788578457657 X-Varnish-Backend-Ourself: arnish_server_snarf_foo_uk X-DMG-Version: 6.20.51.2358 Accept-Ranges: none Connection: keep-alive

第三次更新

因此，在将http方法更改为OPTIONS后，如下所示: $ http({ 方法:"OPTIONS"， ...

3rd UPDATE

So after changing the http method to OPTIONS as in $http({ method: 'OPTIONS', ...

我在chrome控制台中遇到了这个错误

I ge this error in the chrome consoler

XMLHttpRequest无法加载 example/data/action/getGame/9788578457657 .对预检请求的响应未通过访问控制检查:在所请求的资源上不存在"Access-Control-Allow-Origin"标头.因此，不允许访问来源' dev.my-dev.local ".响应的HTTP状态码为405.

XMLHttpRequest cannot load example/data/action/getGame/9788578457657. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'dev.my-dev.local'' is therefore not allowed access. The response had HTTP status code 405.

这些是标题:

OPTIONS /data/action/getGame/9788578457657 HTTP/1.1 Host: example Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Access-Control-Request-Method: OPTIONS Origin: dev.my-dev.local/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36 Access-Control-Request-Headers: Accept: */* Referer: dev.my-dev.local//game/id-9788578457657 Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8 HTTP/1.1 405 Method Not Allowed Date: Wed, 14 Dec 2016 16:52:03 GMT Server: Varnish X-Varnish: 6619151 X-Varnish-Trimen: www.trimen X-Varnish-Served-By-Host: snarf.foo.uk X-Varnish-Served-By-IP: 100.100.10.80 X-Varnish-Pool: X-Varnish-Req-Backend-Hint: dead X-Varnish-Req-Restarts: 0 X-DMG-Version: 6.20.51.2358 Content-Type: text/html; charset=utf-8 Retry-After: 5 Content-Length: 49669 Connection: keep-alive

推荐答案

您需要接收以下标头:

• Access-Control-Allow-Origin: *(或您要限制的主机)
• Access-Control-Allow-Methods: *(或您要限制的任何方法)
• Access-Control-Allow-Methods: Content-Type

• Access-Control-Allow-Origin: * (or whatever host you want to restrict to)
• Access-Control-Allow-Methods: * (or whatever methods you want to restrict to)
• Access-Control-Allow-Methods: Content-Type

请注意最后一个，这也是很重要的，因为您正在设置Content-Type: application/json;charset=UTF-8.如果您还有其他自定义标题，则也需要添加这些自定义标题.

Note the last one which is also important because you are setting Content-Type: application/json;charset=UTF-8. If you have any other custom headers you will need to add those too.

这些都是在服务器上完成的，但您的应用无需执行其他任何操作.

These are all to be done on the server though, your app doesn't need to do anything else.

或者(如果可能)，您可以选择完全不使用application/json并将Content-Type设置为application/x-www-form-urlencoded，multipart/form-data或text/plain，并且不会执行预检(OPTIONS)请求并且是否在服务器上启用CORS都没有关系.

Alternatively (if possible) you can opt to not use application/json at all and set your Content-Type to application/x-www-form-urlencoded, multipart/form-data, or text/plain and no preflight (OPTIONS) request will be done and it won't matter if CORS is enabled on the server or not.