Angular CORS 简单请求在 POST 中使用授权 header 触发预检

Question

根据文档，预检不应针对简单请求进行：https://developer.mozilla.org/en/docs/Web/HTTP/Access_control_CORS)。

如果我不在请求中添加额外的 "Authorization" header 确实是这样：

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

没有 "Authorization" header:

: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" header, 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" header 触发了 CORS 中的预检。任何人都可以对此有所了解吗？

Answer 1

Because of this issue, I am unable to authorize my app, the server response is :
HTTP method 'OPTIONS' is not allowed. Expected 'POST'

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

如果您没有对该服务器的管理员访问权限，无法将其配置为发送 CORS-enabled 对 OPTIONS 请求的响应，那么您从前端 JavaScript 获取请求的唯一选择使用它的代码是设置一个 CORS 代理并通过它发出请求。 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 处的答案有 how-to 个详细信息。

除此之外，您唯一的其他选择是不从您的前端 JavaScript 代码发出请求，而是从您自己的后端代码发出请求，这绕过了浏览器强加的 cross-origin 限制).

So it seems that the "Authorization" header triggers the preflight in CORS. Can anyone shed some light on this please?

是的，当您添加 Authorization header 时，它不再是一个“简单的请求”。

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

If, apart from the headers set automatically by the user agent (for example, Connection, User-Agent, or any of the other header with a name defined in the Fetch spec as a “forbidden header name”), the request includes any headers other than those which the Fetch spec defines as being a “CORS-safelisted request-header”, which are the following:
Accept
Accept-Language
Content-Language
Content-Type
DPR
Downlink
Save-Data
Viewport-Width
Width

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

Angular CORS 简单请求在 POST 中使用授权 header 触发预检

Angular CORS simple request triggers preflight with Authorization header in POST

authorization

cors

preflight

angular