尽管预检响应中有 Access-Control-Allow-Origin 标头，但 CORS 错误

Posted 2023-03-04

【中文标题】尽管预检响应中有 Access-Control-Allow-Origin 标头，但 CORS 错误

【英文标题】：CORS error despite Access-Control-Allow-Origin header in preflight response

【发布时间】：2021-08-17 06:19:52

【问题描述】：

Firefox 和 Chrome 给我 CORS 错误，即使 OPTIONS 响应包含 Access-Control-Allow-Origin。

我很好奇我需要做什么才能使 OPTIONS 预检 cors 检查通过？

这是从两个浏览器复制的请求和响应。

% ## FIREFOX
% curl -i 'http://localhost:5000/sql/change_document_contents?id=1' -X OPTIONS -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0' -H 'Accept: */*' -H 'Accept-Language: en-US,en;q=0.5' --compressed -H 'Access-Control-Request-Method: POST' -H 'Access-Control-Request-Headers: content-type' -H 'Referer: http://localhost:3000/' -H 'Origin: http://localhost:3000' -H 'Connection: keep-alive'
<ol-Request-Headers: content-type' -H 'Referer: http://localhost:3000/' -H 'Origin: http://localhost:3000' -H 'Connection: keep-alive'
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 0
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Server: Werkzeug/1.0.1 Python/3.9.5
Date: Sat, 29 May 2021 06:08:59 GMT
%
% ## CHROME
% curl 'http://localhost:5000/sql/change_document_contents?id=1' \
  -i \
  -X 'OPTIONS' \
  -H 'Connection: keep-alive' \
  -H 'Accept: */*' \
  -H 'Access-Control-Request-Method: POST' \
  -H 'Access-Control-Request-Headers: content-type' \
  -H 'Origin: http://localhost:3000' \
  -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: same-site' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: http://localhost:3000/' \
  -H 'Accept-Language: en-US,en;q=0.9' \
  --compressed
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 0
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Server: Werkzeug/1.0.1 Python/3.9.5
Date: Sat, 29 May 2021 06:12:11 GMT

如您所见，标题在那里，但 CORS 错误仍然出现。 Firefox 在预检请求中给出错误 CORS Missing Allow 标头，在实际 POST 请求中给出 NS_ERROR_DOM_BAD_URI。而 Chrome 显示“跨源资源共享错误：HeaderDisallowedByPreflightResponse”

【问题讨论】：

请解释反对意见。许多资源仅解释 Access-Control-Allow-Origin 标头。这让我相信其他标题没有影响，我现在知道这是错误的。也没有任何好的资源来解释该 Chrome 错误代码。此外，这里的大多数其他答案只是说“使用 xyz 库”，这并没有解释为什么使用 Allow-Origin 标头是不够的。

【参考方案1】：

响应缺少 Access-Control-Allow-Headers 标头。事后看来，Chrome 错误消息有点指向这一点。

要修复，请将Access-Control-Allow-Headers: Content-Type 添加到响应中。