php - CORS header 在浏览器中被更改，导致内容被阻止

Question

更新 2(一组完整的日志)

从客户的角度来看

请求 header :

POST /dev/micro_server.php HTTP/1.1 Host: production-server.com
Connection: keep-alive
Content-Length: 86
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html, /; q=0.01
Origin: https://debug.dev
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36 OPR/58.0.3135.90
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: https://debug.dev/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: debugger_session=iq4tbdk374mtvodsd3edcf2jq5

响应头:

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 12 Mar 2019 12:01:27 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Connection: keep-alive
X-Powered-By: PHP/5.5.9-1ubuntu4.17
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: https://production-server.com
Access-Control-Allow-Credentials: true
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Encoding: gzip

控制台错误:

Access to XMLHttpRequest at 'https://production-server.com/dev/micro_server.php' from origin 'https://debug.dev' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://production-server.com' that is not equal to the supplied origin.

控制台警告:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://daikai.no/dev/micro_server.php with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

从服务器的角度来看

这是服务器所说的已接收和发送的内容(检查执行登录更新 1 的代码):

Array
(
    [req] => Array
        (
            ...
            [HTTP_ORIGIN] => https://debug.dev
            ...
        )

    [rsp] => Array
        (
            [0] => X-Powered-By: PHP/5.5.9-1ubuntu4.17
            [1] => Access-Control-Allow-Origin: https://debug.dev
            [2] => Access-Control-Allow-Methods: GET, POST, OPTIONS
            [3] => Access-Control-Allow-Credentials: true
        )

)

---

更新

我在服务器上添加了一些日志记录，脚本现在以这些行开头:

# allow access from other domains
    header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    header("Access-Control-Allow-Credentials: true");

$all = [
    'req' => $_SERVER,
    'rsp' => headers_list()
];

$s = print_r($all, true);
$p = '/var/www/path/to/file_' . uniqid() . '.txt';
file_put_contents($p, $s);

有了这个，我可以确认请求以正确的来源到达服务器，并且服务器发回正确的 CORS header 。然而，开发者控制台中的Access-Control-Allow-Origin错误，请求被阻止。

这是使用上述代码获得的精简日志:

Array
(
    [req] => Array
        (
            ...
            [HTTP_ORIGIN] => https://debug.dev
            ...
        )

    [rsp] => Array
        (
            [0] => X-Powered-By: PHP/5.5.9-1ubuntu4.17
            [1] => Access-Control-Allow-Origin: https://debug.dev
            [2] => Access-Control-Allow-Methods: GET, POST, OPTIONS
            [3] => Access-Control-Allow-Credentials: true
        )

)

问题

当接收到的实际 header 是 Access- 时，Access-Control-Allow-Origin 如何以及为什么更改为 https://production.com控制允许来源:https://debug.dev?

---

(原帖)

背景

我在本地开发机器上安装了一个基于网络的调试工具。在我的/etc/hosts 中有一个条目，我已将域 debug.dev 分配给它。我还添加了本地 CA 机构并成功为域名创建了 SSL 证书，所以现在我可以在浏览器中打开 https://debug.dev/ 并且调试工具可以正常打开。

此工具应该与暂存和生产服务器一起使用。所以它需要向其他域发送 AJAX 请求。我可以完全控制这些服务器，并且我从这些服务器发回 CORS header ，如下所示:

header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
header("Access-Control-Allow-Credentials: true");

问题

现在我面临一个令人困惑的情况，当我向生产服务器发送 AJAX 请求时，我返回错误 CORS header ，其中包含服务器的域，如下所示:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://production-server.com

但如果我右键单击并使用在新选项卡中打开，CORS header 就是它们应该的样子；即

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://debug.dev

据我所知，请求之间的唯一区别是第一个请求作为 AJAX POST 请求发送，因此发送 HTTP_X_REQUESTED_WITH header ，而第二个请求作为普通 GET 请求发送。这怎么会导致服务器返回不同的 CORS header ？

Answer 1

问题可能类似于 my answer here :

The server is not configured to respond to OPTIONS requests with the correct "Access-Control-Allow-" headers.

Opening the url in a new Tab 是一个GET 请求并且正在工作，因为它没有发出预检请求，因为它满足成为simple request的标准由 CORS documentation 定义

另一方面，ajax 请求 是一个POST 请求并且满足Preflighted request 的条件。 ，这意味着应该首先进行预检 OPTIONS 请求。

简而言之，您已正确设置 CORS 响应 header ，但服务器未配置为添加这些 header 用于 OPTIONS 方法请求。

解决方案是在服务器代码上处理OPTIONS请求，返回2xx响应并添加**Access-Control-Allow-正如您对 GET 和 POST 请求所做的那样。请记住，OPTIONS 请求不包含任何参数，因此这应该在任何验证或请求解析之前完成。

此外，根据Access-Control-Allow-Origin documentation :

If the server specifies a single origin rather than the "*" wildcard, then the server should also include Origin in the Vary response header — to indicate to clients that server responses will differ based on the value of the Origin request header.

因此还要设置Vary 响应 header :

例如，在您的脚本顶部尝试:

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    header("Access-Control-Allow-Credentials: true");
    header("Vary: Origin");
    exit;
}

引用资料

Preflighted requests

response for preflight 403 forbidden