allow-control-allow-origin : * 出现在响应中，但仍然显示错误

Question

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

这是来自 API 的示例响应标头：

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 标头 - 这称为飞行前请求。看一下客户端和服务器here之间完整的CORS交换示例。

所以第一步是客户端使用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 标头进行响应：

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。