express - 请求 header 字段不允许访问-控制-允许 header 错误

Question

我有一个VueJS应用程序和一个ExpressJS服务器端应用程序。在我的服务器上，我有以下内容:

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    res.setHeader("Access-Control-Allow-Credentials", "true");
    res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    next();
}
app.use(allowCrossDomain);

但是，我不断收到以下错误:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

我发送这样的请求:

import axios from 'axios'

export default axios.create({
  baseURL: 'https://example.com',
  timeout: 5000,
  headers: {
    'Authorization': 'Bearer ' + accessToken
  }
})

我该如何解决？我尝试了许多解决方案，并对此进行了阅读。我已阅读以下内容:

How to allow CORS?

CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response

Answer 1

问题中的代码显然不会导致Access-Control-Allow-Headers header 发送给OPTIONS响应，特别是针对the CORS preflight OPTIONS 的响应。

为了确保正确处理印前检查OPTIONS，请考虑安装npm cors软件包:

npm install cors

然后执行以下操作:

var express = require('express')
  , cors = require('cors')
  , app = express();
app.options('*', cors()); // preflight OPTIONS; put before other routes

这将处理CORS起飞前 OPTIONS请求和其他CORS方面，而无需在应用程序代码中从头开始手动编写自己的处理方式。

https://www.npmjs.com/package/cors#configuration-option有关所有选项的更多详细信息。