jquery - allow-control-allow-origin : * present in response, 但它仍然显示错误

Question

allow-control-allow-origin : * header 存在于 API 响应中，但浏览器仍显示错误。网络 403 错误。

这是来自 API 的示例响应 header :

Access-Control-Allow-Headers: Origin,X-Requested-With,X-CSRF-Token,Content-Type
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Origin: *
Cache-Control: no-cache="set-cookie"
Connection: keep-alive
Content-Length: 870
Content-Type: text/plain;charset=UTF-8
Date: Sat, 28 Nov 2015 17:56:46 GMT
Server: Apache-Coyote/1.1
Set-Cookie: AWSELB=6B492DE10EE

Firebug 错误:

"NetworkError: 403 Forbidden - https://xyz.....s"

 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xyz..... (Reason: CORS header 'Access-Control-Allow-Origin' missing).

请求 - AngularJS

var config = {
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                    "Apikey": "*************" 
                }
            }

            $http.post(URL, data, config)
            .success(function (data, status, headers, config) {
               //function
            })

Answer 1

确保您的服务器支持 OPTIONS 动词并在客户端使用它时返回正确的 CORS header - 这称为飞行前请求。查看客户端和服务器之间完整 CORS 交换的示例 here .

因此，第一步是客户端使用 OPTIONS HTTP 动词发送飞行前请求:

OPTIONS /canvas/73/source HTTP/1.1
Host: jsbin.com
Access-Control-Request-Method: GET
Origin: http://jsconsole.com
Access-Control-Request-Headers: x-requested-with

现在您的服务器应该使用正确的 CORS header 进行响应:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With

就是这样，您已经建立了握手，现在可以随意获取/发布您想要的任何内容:

GET /canvas/73/source HTTP/1.1
Host: jsbin.com
x-requested-with: XMLHttpRequest

您将获得成功响应:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Content-Length: 977

...

你也可以看看this example .