浏览器未在OPTIONS调用中发送“授权”标头

Question

我有一个非常简单的HTTP调用：

fetch('http://127.0.0.1:5500/v1/homes/', {
  method: "GET", 
  mode: "cors", 
  credentials: "same-origin", 
  headers: {
     Authorization: "TEST"
  }})
  .then(function(response) {
    console.log(response);
  });

但是，当我查看Google Chrome DevTools的“网络”标签时，OPTIONS请求中没有“授权”标头。这将导致服务器使用“ 401未经授权”进行答复。

浏览器的curl等同于请求：

curl 'http://127.0.0.1:5500/v1/homes/' \
-X OPTIONS -H 'Access-Control-Request-Method: GET' \
-H 'Origin: http://localhost:8100'
-H 'Referer: http://localhost:8100/'
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36'
-H 'Access-Control-Request-Headers: authorization'
--compressed

我在客户端做错了吗？还是浏览器不发送OPTIONS请求中的Authorization标头很普遍，因此，我需要以一种响应OPTIONS调用的方式更改服务器而无需Authorization标头？

Answer 1

浏览器不发送OPTIONS请求中的Authorization标头是否很常见

不止于此。它是由所需的CORS规范它说“ 与预检一个跨域请求......让预检请求......排除用户证书 ”。

我需要更改服务器以响应OPTIONS调用的方式而无需Authorization标头？

是

Answer 2

Options客户端请求调用，在您的情况下，Chrome 浏览器在实际调用之前隐式请求GET。

来自MDN

HTTP OPTIONS 方法用于描述目标资源的通信选项。客户端可以为 OPTIONS 方法指定 URL，或星号 (*) 来引用整个服务器。

在服务器端，您必须拦截此选项请求，并使用 HTTP 状态代码 200 和指示Allow对此资源允许的操作的标头进行响应。例如：Allow: HEAD,GET,PUT,DELETE,OPTIONS

浏览器收到这些详细信息后将继续调用Get。