Vuejs SPA + Nodejs API 的 CORS 问题

Posted 2023-02-22

【中文标题】Vuejs SPA + Nodejs API 的 CORS 问题

【英文标题】：CORS issue with Vuejs SPA + Nodejs API

【发布时间】：2018-08-04 11:44:17

【问题描述】：

我有一个设置作为标题，在我的 nodejs express 应用程序中安装了cors npm。此外，托管我的 nodejs 应用程序的 nginx 上启用了基本身份验证。 （身份验证只需要在每个请求的标头附加一个“授权”密钥）。

我的nodejs入口文件（带cors）：

var express = require('express');
var bodyParser = require('body-parser');
var morgan = require('morgan');
var routes = require('./routes');
var cors = require('cors');

var app = express();
var port = process.env.PORT || 3000

app.set('view engine', 'ejs');

app.use('/assets', express.static('./public'))
app.use(bodyParser.json(limit: '50mb'));
app.use(morgan('dev'));
app.use(cors(
    origin: 'http://localhost:8080',
    credentials: true,
    allowedHeaders: ['Content-Type', 'Authorization']
));
app.options('*', cors());
routes.init(app);

app.listen(port, function() 
    console.log(`Express running on $port`)
)

我的 vuejs main.js 文件和 vue-resource 设置为处理 API 调用：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.use(VueResource)

if(process.env.NODE_ENV === 'production') 
    Vue.http.options.root = 'http://api.server.net'
    Vue.http.interceptors.push((request, next) => 
        request.headers.set('Authorization', 'Basic xxxxx')
        next()
    )


new Vue(
    el: '#app',
    router,
    components:  App ,
    template: '<App/>'
)

完成上述操作后，我收到此错误“对预检请求的响应未通过访问控制检查：请求的资源上不存在‘Access-Control-Allow-Origin’标头。”

更多观察：

-使用邮递员调用 API 并将授权密钥附加到请求标头中。 （了解邮递员不受 CORS 问题的影响，只是为了证明授权密钥有效）。但是，在邮递员中，响应标头没有 ACCESS-CONTROL-ALLOW-ORIGIN 键。当我在 chrome devtools 中检查响应头时也是如此。

-使用 chrome 开发工具，我还注意到请求标头中没有授权密钥。

有人能指出正确的方向吗？

编辑：格式化

【参考方案1】：

我找到了答案（以防其他人面临类似问题）。

运行nodejs的nginx服务器在OPTIONS请求中需要Authorization key，这就是问题背后的原因。

【讨论】：

你能解释一下你是怎么解决的吗？