Question

根据文档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'

所以似乎“授权”标题触发了CORS中的预检。有人可以对此有所了解吗？

Answer 1

由于此问题，我无法授权我的应用，服务器响应是：
HTTP method 'OPTIONS' is not allowed. Expected 'POST'

如果您具有发送请求的服务器的管理员访问权限，那么您需要配置该服务器以允许HTTP OPTIONS请求，并使用Access-Control-Allow-Headers和{{来响应它们1}}浏览器需要查看的响应标头，以便允许实际的Access-Control-Allow-Methods或GET或您尝试制作的任何内容（除了POST响应标头浏览器需要请参阅实际要求。）

如果您没有该服务器的管理员权限来配置它以向Access-Control-Allow-Origin请求发送启用CORS的响应，那么从前端JavaScript代码获取请求以使用它的唯一选择是设置一个CORS代理并通过它发出请求。 "No 'Access-Control-Allow-Origin' header is present on the requested resource"的答案有详细说明。

除此之外，您唯一的另一个选择是不要从您的前端JavaScript代码发出请求，而是从您自己的后端代码中创建它，这会绕过浏览器强加的跨源限制。

所以似乎＆＃34;授权＆＃34; header触发CORS中的预检。有人可以对此有所了解吗？

是的，当您添加OPTIONS标头时，这不再是“简单请求”。

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

除了用户代理自动设置的标头之外（用于例如，Authorization，Connection或any of the other header with a name defined in the Fetch spec as a “forbidden header name”），请求包括those which the Fetch spec defines as being a “CORS-safelisted request-header”以外的任何标头，其中包含。{3}} 如下：
User-Agent

Accept Accept-Language Content-Language Content-Type DPR Downlink Save-Data Viewport-Width Width不在该列表中，因此会触发预检。

Angular CORS简单请求在POST中使用Authorization标头触发预检

1 个答案: