Access-Control-Allow-Origin header 存在但浏览器拒绝 XMLHttpRequest

Question

我有一个非常奇怪的问题。我有一个 Web 服务构建，其中包含一个简单的 Perl CGI 脚本作为 API 的包装器（以允许受限的跨源控制）。无论如何，为了允许 Cross-Origin 请求，我设置了这些 headers:

Content-Type: text/plain
Access-Control-Allow-Origin: $origin
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Accept-Language, Content-Language
Content-Security-Policy: connect-src *
X-Content-Security-Policy: connect-src *
X-WebKit-CSP: connect-src *
Access-Control-Max-Age: 1728000
Vary: Accept-Encoding, Origin

其中 my $origin = $ENV{HTTP_ORIGIN} // '*';。

当脚本请求预期的资源时，包装器的响应如下（从 Firefox 复制）：

HTTP/1.1 200 OK
Date: Wed, 20 Jan 2016 12:54:48 GMT
Server: Apache
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Accept-Language, Content-Language
content-security-policy: connect-src *, frame-ancestors 'self'
X-Content-Security-Policy: connect-src *
X-WebKit-CSP: connect-src *
Access-Control-Max-Age: 1728000
Vary: Accept-Encoding,Origin
Content-Length: 0
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/plain

浏览器出现以下错误：

XMLHttpRequest cannot load http://www.example.com/cgi-bin/wrapper.pl. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example2.com' is therefore not allowed access.`

我还用 curl 和 Postman 测试了调用，但它按预期工作。问题是所有浏览器似乎都忽略 Access-Control-Allow-Origin header，即使他已设置。

Answer 1

好的，我找到问题了。错误是我只在 OPTIONS 请求中发送 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers，而不是在正常的 POST 中发送。

Access-Control-Allow-Origin header 存在但浏览器拒绝 XMLHttpRequest

Access-Control-Allow-Origin header is present but Browser deny XMLHttpRequest

javascript

apache

perl

xmlhttprequest

http-headers