指路牌
- 後端配置好了跨域,但是前端在HTTP header添加token後,又産生跨域的問題
- Flask、Vue(Axios)、跨域
适用場景
- 前後端分離,想要使用token來管理登入狀态,或調用背景接口
環境
- 平台無關
參考部落格
- axios 在header中配置token資訊後,向後端請求會報跨域的問題。但是用postman測試的時候沒有什麼問題。
這個問題的回答其實沒有給出直接性的幫助,甚至回答的有點奇怪,但是幫我打開了思路。
背景
出于多種考慮,放棄了使用類似WordPress這種現成部落格解決方案,準備自己搭建一個部落格系統,技術選型為:後端:Flask,前端:Vue。登入狀态管理放棄cookie,采用token。開發進行到路由保護處時出現了CORS的問題,具體情形是Vue将從背景擷取的token添加到HTTP請求的header中,調用相應接口時出現跨域。
在此次跨域出現前實際上已經在Flask通過flask_cors配置了跨域解決方案,是以跨域的産生是讓我十分不解的,又由于問題比較奇特在搜尋引擎中沒有找到很好的解決方案(也可能是我不知道怎麼描述,沒有搜出來),是以自己重新研究可以一下跨域,又有了一些新收獲。
分析
相信使用前後端分離的開發者在開發之初就會碰到跨域的問題,跨域的解決方案有很多種,我選擇通過背景解決。
跨域是浏覽器同源政策導緻的問題,網上相關文章很多,此處不贅述。備注一點:postman不會産生跨域。
Flask解決跨域的方案非常簡單,以下代碼即可完成。
from flask_cors import CORS
CORS(app,supports_credentials=True
@app.after_request def after_request(resp):
resp = make_response(resp)
resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8080'
resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
resp.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
return resp
配置完成後,一直也沒有沒有出過問題,是以也就沒有去進一步了解其配置的含義,直到這一次被卡住,讓我不得不去了解一下跨域我究竟配置了什麼東西?
其實這個問題的關鍵點就在于那三條配置:
Access-Control-Allow-Origin
、
Access-Control-Allow-Methods
、
Access-Control-Allow-Headers
.
他們到底代表什麼含義?
首先
Access-Control-Allow-Origin
,字面上的意思,配置這個可以允許相應的源來通路背景資源,網上大多在此處的寫的是
*
,也即允許所有源,這樣很不安全,由于我此處是本地開發階段,Vue的啟動端口是8080,是以我寫的是
http://127.0.0.1:8080
,根據你的開發需要改成自己需要的三元組即可。
其次
Access-Control-Allow-Methods
,也是字面上的意思,允許用的HTTP的Method有哪些,GET,POST是最常見的,此處隻寫了兩個,如果你需要使用其他Method,在這裡要寫進來,否則也會會出現跨域問題。
以上兩個配置都沒有問題,問題在了最後一部分:
Access-Control-Allow-Headers
,和上面兩個一樣,字面的意思,之是以是她出問題了,是因為我們在前端給HTTP請求添加了一個自定義的字段
token
,而這不在許可範圍内(許可的隻有
x-requested-with
和
content-type
),是以被判定為了不符合同源政策的非法請求,是以我們隻需要将自定義的header添加進去即可。答案已經出來了。
繼續挖一下,這個字段的兩個含義分别還是什麼?
x-requested-with
,
content-type
.
x-requested-with
是一個用來判斷用戶端請求是否由Ajax發起的,是以和Axios有什麼關系?答案是:沒有關系...可以直接删了。貼上這段代碼的人或者是預設了發起請求使用的是Ajax,又或者沒有分析字段含義,是以很直接貼了這段代碼,但是對于使用Axios的開發者來說,這個字段不是必然的。
content-type
: 指明POST請求的資料格式以及編碼方式。資料格式最常見的莫過于josn,其形式如下:
application/json
在後端列印出POST請求的HTTP Header,就會發現有下面這條和資料。
Content-Type: application/json;charset=UTF-8
解決方案
在
Access-Control-Allow-Headers
中添加上自定義的header名稱,整體如下:
from flask_cors
import CORS
CORS(app,supports_credentials=True
@app.after_request def after_request(resp):
resp = make_response(resp)
resp.headers['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8080'
resp.headers['Access-Control-Allow-Methods'] = 'GET,POST'
resp.headers['Access-Control-Allow-Headers'] = 'content-type,token'
return resp
其實直接删掉
Access-Control-Allow-Headers
這條配置,也能解決問題,但是枚舉出所有固定情形當然是更安全的。
要擷取更多Haytham原創文章,請關注公衆号"許聚龍":