我正在尝试从API获取JSON对象,并且该API的开发人员说他们刚刚启用了CORS,但我仍然遇到以下错误。
XMLHttpRequest无法加载http://example.com/data/action/getGame/9788578457657。所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此,不允许访问源“ http://dev.our- domain.local ”。
我正在使用AngularJS在服务中获取JSON
app.service("gameService", function ($http, $q) { function getGame(GameId) { var deferred = $q.defer() var url = 'http://example.com/data/action/getGame/' + gameId; // var url = 'https://jsonplaceholder.typicode.com/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; })
当我使用启用了CORS的jsonplaceholder对其进行测试时,我的AngularJS服务可以正常工作。
我想念什么吗?
API开发人员说,两个CORS-Header已添加到data.service响应中,但我看不到它们。这是当我curl按下JSON对象时在标题上看到的。
curl
$ curl -X HEAD -i http://example.com/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.com 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后应该看到的内容吗?
我是否需要在AngularJS服务中添加更多内容以启用启用了Cors的http get,并在其中添加以下内容:
headers: { 'Content-Type': 'application/json;charset=UTF-8' }
传递原点:@ t.niese建议在我的curl请求的标头中
$ curl -H "Origin: http://our-production-domain.com/" --verbose \ > http://example.com/data/action/getGame/9788578457657 * Trying 1?.???.??.???... * Connected to http://example.com/ (1?.???.??.???) port 80 (#0) > GET /data/action/getGame/9788578457657 HTTP/1.1 > Host: http://example.com/ > User-Agent: curl/7.43.0 > Accept: */* > Origin: http://our-production-domain.com/ > < 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.com < 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 http://example.com/ left intact }
和..
$ curl -H "Origin: http://qa.our-qa-domain.com/" --verbose \ > http://example.com/data/action/getGame/9788578457657 * Trying 1?.???.??.???... * Connected to http://example.com/ (1?.???.??.???) port 80 (#0) > GET /data/action/getGame/9788578457657 HTTP/1.1 > Host: http://example.com/ > User-Agent: curl/7.43.0 > Accept: */* > Origin: http://qa.our-qa-domain.com/ > < 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.com < 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 http://example.com/ left intact
$ curl -H "Origin: http://dev.my-dev.local/" --verbose \ > http://example.com/data/action/getGame/9788578457657 * Trying 1?.???.??.???... * Connected to http://example.com/ (1?.???.??.???) port 80 (#0) > GET /data/action/getGame/9788578457657 HTTP/1.1 > Host: http://example.com/ > User-Agent: curl/7.43.0 > Accept: */* > Origin: http://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.com < 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 http://example.com/ left intact }
我在Chrome中禁用了相同的来源策略,这些是来自Chrome的网络面板的JSON请求的标头。
GET data/action/getGame/9788578457657 HTTP/1.1 Host: example.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Accept: application/json, text/plain, */* Origin: http://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: http://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.com 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({method:’OPTIONS’,…
OPTIONS
我在chrome控制台中出现此错误
XMLHttpRequest无法加载http://example.com/data/action/getGame/9788578457657。对预检请求的响应未通过访问控制检查:在所请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此,不允许访问原始站点 “ http://dev.my-dev.local ”。响应的HTTP状态码为405。
这些是标题:
OPTIONS /data/action/getGame/9788578457657 HTTP/1.1 Host: example.com Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Access-Control-Request-Method: OPTIONS Origin: http://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: http://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.com 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
注意最后一个也是很重要的,因为您正在设置Content-Type: application/json;charset=UTF-8。如果您还有其他自定义标头,则也需要添加这些标头。
Content-Type: application/json;charset=UTF-8
这些都是在服务器上完成的,但您的应用无需执行其他任何操作。
或者(如果可能),您可以选择完全不使用application/json,并将其设置Content-Type为application/x-www- form-urlencoded,multipart/form- data或,text/plain并且不会执行预检(OPTIONS)请求,并且是否CORS在服务器上启用也无关紧要。
application/json
Content-Type
application/x-www- form-urlencoded
multipart/form- data
text/plain
CORS