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);

但是，我一直收到以下错误：

请求标头字段不允许授权预检响应中的Access-Control-Allow-Headers。

我发送的请求是这样的：

import axios from 'axios'

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

我该如何解决这个问题？我尝试了很多解决方案，并对此进行了阅读。我已阅读以下内容：

Answer 1

问题中的代码显然没有导致Access-Control-Allow-Headers标头被发送到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详细了解所有选项。

请求标头字段Access-Control-Allow-Headers错误不允许授权

1 个答案: