Vuejs SPA + Nodejs 的 CORS 问题 API
CORS issue with Vuejs SPA + Nodejs API
我有一个设置作为标题,cors
npm 安装在我的 nodejs express 应用程序中。此外,在托管我的 nodejs 应用程序的 nginx 上启用了基本身份验证。 (身份验证只需要一个 'Authorization' 密钥附加到每个请求的 headers)。
我的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/>'
})
以上设置完成后,我收到此错误 "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
更多观察:
-用邮递员调用 API 并将授权密钥附加到请求 header 有效。 (了解邮递员不受 CORS 问题的影响,只是为了证明授权密钥有效)。然而,在邮递员中,响应 header 没有 ACCESS-CONTROL-ALLOW-ORIGIN 键。当我在 chrome devtools.
中检查响应 header 时也是如此
-使用 chrome 开发工具,我还注意到请求 header 中没有授权密钥。
有人能给我指出正确的方向吗?
编辑:格式化
我找到了答案(以防其他人遇到类似问题)。
nginx 服务器运行nodejs 需要OPTIONS 请求中的授权密钥,这是问题背后的原因。
我有一个设置作为标题,cors
npm 安装在我的 nodejs express 应用程序中。此外,在托管我的 nodejs 应用程序的 nginx 上启用了基本身份验证。 (身份验证只需要一个 'Authorization' 密钥附加到每个请求的 headers)。
我的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/>'
})
以上设置完成后,我收到此错误 "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
更多观察:
-用邮递员调用 API 并将授权密钥附加到请求 header 有效。 (了解邮递员不受 CORS 问题的影响,只是为了证明授权密钥有效)。然而,在邮递员中,响应 header 没有 ACCESS-CONTROL-ALLOW-ORIGIN 键。当我在 chrome devtools.
中检查响应 header 时也是如此-使用 chrome 开发工具,我还注意到请求 header 中没有授权密钥。
有人能给我指出正确的方向吗?
编辑:格式化
我找到了答案(以防其他人遇到类似问题)。
nginx 服务器运行nodejs 需要OPTIONS 请求中的授权密钥,这是问题背后的原因。