尽管在Express中设置了Access-Control-Allow-Origin，但请求头字段授权

Question

我使用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.

感谢您的帮助以解决此问题。

Answer 1

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

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

BTW大部分已经包含在那里的标题实际上不需要提及CORS，因为they are "simple" headers - 有dedicated list。

它与您明确发送的标头有关。假设origin和access-control-request-headers是由浏览器生成的，用于预检 - 直到你没有明确发送它们，你也不需要为Access-Control-Allow-Headers列出它们作为回应。