2017-11-18 203 views
1

我有一個VueJS應用程序和一個ExpressJS服務器端應用程序。在我的服務器我有以下:請求標頭字段授權是Access-Control-Allow-Headers不允許的錯誤

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); 

不過,我不斷收到以下錯誤:

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

我送我的要求是這樣的:

import axios from 'axios' 

export default axios.create({ 
    baseURL: 'https://example.com', 
    timeout: 5000, 
    headers: { 
    'Authorization': 'Bearer ' + accessToken 
    } 
}) 

哪有我解決這個問題?我已經嘗試了很多解決方案並閱讀了這個。我已閱讀下面:

+0

您的服務器是否響應OPTIONS請求,瀏覽器會發送該請求來預檢請求以查看它是否被允許?我建議你看一下Chrome調試器中的網絡標籤,看看瀏覽器正在發送什麼以及你的服務器在響應什麼。通常,您可以在該信息中更準確地看到問題。 – jfriend00

回答

1

的問題顯然不是導致Access-Control-Allow-Headers頭代碼即可獲得用於發送OPTIONS回覆 - 特別是針對的回覆。

爲了確保預檢OPTIONS得到正確處理,可以考慮安裝故宮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有關於所有選項的更多詳細信息。

相關問題