Angular CORS 简单请求通过 POST 中的授权标头触发预检

根据文档，对于简单的请求，预检不应该发生：https://developer.mozilla.org/en/docs/Web/HTTP/Access_control_CORS https://developer.mozilla.org/en/docs/Web/HTTP/Access_control_CORS).

如果我不在请求中添加额外的“Authorization”标头，情况确实如此：

"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Basic _base64_string_"

没有“授权”标头：

:authority:www.target.com
:method:POST //<----------------This is correct
:path:/oauth2/access_token?client_id=xxx-xxx
:scheme:https
accept:application/json, text/plain, */*
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.8,fr;q=0.6
content-length:79
content-type:application/x-www-form-urlencoded//<----------------This is correct
origin:http://source.com:4200
referer:http://source.com:4200/

通过“Authorization”标头，OPTIONS 方法会自动设置：

:authority:www.target.com
:method:OPTIONS //<----------------This is NOT correct, caused by Authorization header
:path:/oauth2/access_token?client_id=xxx-xxx
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, sdch, br
accept-language:en-US,en;q=0.8,fr;q=0.6
access-control-request-headers:authorization
access-control-request-method:POST
origin:http://source.com:4200
referer:http://source.com:4200/

由于这个问题，我无法授权我的应用程序，服务器响应是：

HTTP method 'OPTIONS' is not allowed. Expected 'POST'

因此，“Authorization”标头似乎触发了 CORS 中的预检。 有人能解释一下吗？

由于这个问题，我无法授权我的应用程序，服务器响应是：

HTTP method 'OPTIONS' is not allowed. Expected 'POST'

如果您对请求发送到的服务器具有管理员访问权限，则需要将该服务器配置为允许 HTTPOPTIONS请求，并用Access-Control-Allow-Headers and Access-Control-Allow-Methods浏览器需要查看响应标头才能允许实际GET or POST或任何你想要做的事情（除了Access-Control-Allow-Origin浏览器需要查看实际请求的响应标头）。

如果您没有该服务器的管理员访问权限来将其配置为将启用 CORS 的响应发送到OPTIONS请求，那么从前端 JavaScript 代码获取请求以使用它的唯一选择是设置 CORS 代理并通过该代理发出请求。答案在“请求的资源上不存在‘Access-Control-Allow-Origin’标头” https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource/42744707#42744707有操作方法的详细信息。

除此之外，您唯一的其他选择是不从前端 JavaScript 代码发出请求，而是从您自己的后端代码发出请求，这会绕过浏览器施加的跨源限制）。

因此，“Authorization”标头似乎触发了 CORS 中的预检。有人能解释一下吗？

是的，当你添加Authorizationheader，这使得它不再是一个“简单的请求”。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests解释这一点；它说触发浏览器进行预检的条件之一是：

如果，除了用户代理自动设置的标头（对于 例子，Connection, User-Agent, or 任何其他标头 Fetch 规范中定义为“禁止标头名称”的名称 https://fetch.spec.whatwg.org/#forbidden-header-name), 该请求包含除以下之外的任何标头那些 Fetch 的 规范定义为“CORS 安全列表请求标头” https://fetch.spec.whatwg.org/#cors-safelisted-request-header， 哪个 如下：

Accept
Accept-Language
Content-Language
Content-Type
DPR
Downlink
Save-Data
Viewport-Width
Width

The Authorization不在该列表中，因此它会触发预检。