与Vuejs SPA + Nodejs API的CORS问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了与Vuejs SPA + Nodejs API的CORS问题相关的知识,希望对你有一定的参考价值。

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

我的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问题的影响,只是为了证明授权密钥有效)。但是,在postman中,响应头没有ACCESS-CONTROL-ALLOW-ORIGIN键。当我检查chrome devtools中的响应头时,情况也是如此。

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

有人能指出我正确的方向吗?

编辑:格式化

答案

我找到了答案(如果其他人遇到类似的问题)。

运行nodejs的nginx服务器需要OPTIONS请求中的授权密钥,这是问题背后的原因。

以上是关于与Vuejs SPA + Nodejs API的CORS问题的主要内容,如果未能解决你的问题,请参考以下文章

使用 VueJS 全家桶做一个简单的 SPA 应用

nodejs和vuejs的区别

如何验证从反应 SPA 中的 keycloak 检索的 nodejs express api 的访问令牌?

API/SPA 的用户注册

axios GET 请求不返回任何数据(VueJS 和 NodeJS)

带有 Vuejs 的 Laravel 7.x Sanctum (SPA) 总是返回 401 Unauthorized