[英]CORS issue with Vuejs SPA + Nodejs API
我有一個設置作為標題,在我的 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 開發工具,我還注意到請求標頭中沒有授權密鑰。
有人能指出我正確的方向嗎?
編輯:格式化
我找到了答案(以防其他人遇到類似問題)。
運行nodejs的nginx服務器在OPTIONS請求中需要Authorization key,這就是問題背后的原因。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.