请求头字段 Authorization is not allowed by Access-Control-Allow-Headers Error答案

【问题标题】：Request header field Authorization is not allowed by Access-Control-Allow-Headers Error请求头字段 Authorization is not allowed by Access-Control-Allow-Headers Error
【发布时间】：2018-05-01 20:32:07
【问题描述】：

我有一个 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);

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

请求头域 Authorization is not allowed by 预检响应中的 Access-Control-Allow-Headers。

我这样发送请求：

import axios from 'axios'

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

我该如何解决这个问题？我已经尝试了很多解决方案并阅读了这一点。我已阅读以下内容：

【问题讨论】：

您的服务器是否响应 OPTIONS 请求，浏览器将发送该请求以预检您的请求以查看是否允许？我建议您查看 Chrome 调试器中的网络选项卡，并准确查看浏览器发送的内容以及您的服务器响应的内容。通常，您可以在该信息中更准确地看到问题。

标签： express vue.js cors

【解决方案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 提供所有选项的更多详细信息。

【讨论】：

在这里工作！谢谢！