尽管 Access-Control-Allow-Origin 设置为 express ，但请求标头字段 Authorization

Posted 2023-02-22

【中文标题】尽管 Access-Control-Allow-Origin 设置为 express ，但请求标头字段 Authorization

【英文标题】：Request header field Authorization despite Access-Control-Allow-Origin being set in express

【发布时间】：2019-02-17 00:10:42

【问题描述】：

我使用 Vue-cli 制作了一个 Vue.js 应用程序，并希望从后端使用受限 api。

为了避免 CORS 问题在我的应用程序的 server.js 中，我设置了这个：

app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

  next();
);

但是，当我使用 Vue.js 组件的授权标头发出请求时：

 axios.get('http://127.0.0.1:3000/api/article', headerConfig)
        .then( res => this.article = res.data)
         .catch(error => console.log(error))            
    

我还是明白了：

Failed to load http://127.0.0.1:3000/api/article: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

感谢您帮助解决此问题。

【问题讨论】：

检查这个enable-cors.org/server_expressjs.html。在您的“Access-Control-Allow-Headers”标题中还有一个Access-Control-Allow-Headers 正常吗？

抱歉，不知道您所说的“正常”是什么意思，我将此headers: Authorization: this.token, crossdomain: true 作为请求 axios'headerConfig 发送。

我在谈论app.use()，检查这一行：res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); 你发送Access-Control-Allow-Headers 作为Access-Control-Allow-Headers 中的标题

那应该是什么？我刚刚从 SO 的回复中复制了它以解决 CORS 问题。

您尝试过enable-cors.org/server_expressjs.html 中的内容吗？

【参考方案1】：

您必须明确允许“授权”标头用于跨域请求，并提到 Access-Control-Allow-Headers 标头：

res.header("Access-Control-Allow-Headers", "X-Requested-With, Authorization");

顺便说一句，由于they are "simple" headers，您已经包含在其中的大多数标头实际上不需要提及 CORS - 有dedicated list。

它仅与您明确发送的标头有关。 假设 origin 和 access-control-request-headers 由浏览器生成以进行预检 - 除非您没有明确发送它们，否则您也不需要为 Access-Control-Allow-Headers 列出它们作为响应。