首页 文章

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

提问于
浏览 次
1

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

我怎么能绕过这个？我尝试了很多解决方案，并对此进行了阅读 . 我看过以下内容：

express vue.js cors

1 回答

  • 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有关于所有选项的更多详细信息 .

    回复于

相关问题