您好,登錄后才能下訂單哦!
這個(gè)問題的回答其實(shí)沒有給出直接性的幫助,甚至回答的有點(diǎn)奇怪,但是幫我打開了思路。
出于多種考慮,放棄了使用類似WordPress這種現(xiàn)成博客解決方案,準(zhǔn)備自己搭建一個(gè)博客系統(tǒng),技術(shù)選型為:后端:Flask,前端:Vue。登錄狀態(tài)管理放棄cookie,采用token。開發(fā)進(jìn)行到路由保護(hù)處時(shí)出現(xiàn)了CORS的問題,具體情形是Vue將從后臺(tái)獲取的token添加到HTTP請(qǐng)求的header中,調(diào)用相應(yīng)接口時(shí)出現(xiàn)跨域。
在此次跨域出現(xiàn)前實(shí)際上已經(jīng)在Flask通過flask_cors配置了跨域解決方案,因此跨域的產(chǎn)生是讓我十分不解的,又由于問題比較奇特在搜索引擎中沒有找到很好的解決方案(也可能是我不知道怎么描述,沒有搜出來),因此自己重新研究可以一下跨域,又有了一些新收獲。
相信使用前后端分離的開發(fā)者在開發(fā)之初就會(huì)碰到跨域的問題,跨域的解決方案有很多種,我選擇通過后臺(tái)解決。
跨域是瀏覽器同源策略導(dǎo)致的問題,網(wǎng)上相關(guān)文章很多,此處不贅述。備注一點(diǎn):postman不會(huì)產(chǎn)生跨域。
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
配置完成后,一直也沒有沒有出過問題,因此也就沒有去進(jìn)一步了解其配置的含義,直到這一次被卡住,讓我不得不去了解一下跨域我究竟配置了什么東西?
其實(shí)這個(gè)問題的關(guān)鍵點(diǎn)就在于那三條配置:Access-Control-Allow-Origin
、Access-Control-Allow-Methods
、Access-Control-Allow-Headers
.
他們到底代表什么含義?
首先Access-Control-Allow-Origin
,字面上的意思,配置這個(gè)可以允許相應(yīng)的源來訪問后臺(tái)資源,網(wǎng)上大多在此處的寫的是*
,也即允許所有源,這樣很不安全,由于我此處是本地開發(fā)階段,Vue的啟動(dòng)端口是8080,所以我寫的是http://127.0.0.1:8080
,根據(jù)你的開發(fā)需要改成自己需要的三元組即可。
其次Access-Control-Allow-Methods
,也是字面上的意思,允許用的HTTP的Method有哪些,GET,POST是最常見的,此處只寫了兩個(gè),如果你需要使用其他Method,在這里要寫進(jìn)來,否則也會(huì)會(huì)出現(xiàn)跨域問題。
以上兩個(gè)配置都沒有問題,問題在了最后一部分:
Access-Control-Allow-Headers
,和上面兩個(gè)一樣,字面的意思,之所以是她出問題了,是因?yàn)槲覀冊(cè)谇岸私oHTTP請(qǐng)求添加了一個(gè)自定義的字段token
,而這不在許可范圍內(nèi)(許可的只有x-requested-with
和content-type
),因此被判定為了不符合同源策略的非法請(qǐng)求,所以我們只需要將自定義的header添加進(jìn)去即可。答案已經(jīng)出來了。
繼續(xù)挖一下,這個(gè)字段的兩個(gè)含義分別還是什么?x-requested-with
,content-type
.
x-requested-with
是一個(gè)用來判斷客戶端請(qǐng)求是否由Ajax發(fā)起的,所以和Axios有什么關(guān)系?答案是:沒有關(guān)系...可以直接刪了。貼上這段代碼的人或者是默認(rèn)了發(fā)起請(qǐng)求使用的是Ajax,又或者沒有分析字段含義,所以很直接貼了這段代碼,但是對(duì)于使用Axios的開發(fā)者來說,這個(gè)字段不是必然的。
content-type
: 指明POST請(qǐng)求的數(shù)據(jù)格式以及編碼方式。數(shù)據(jù)格式最常見的莫過于josn,其形式如下:application/json
在后端打印出POST請(qǐng)求的HTTP Header,就會(huì)發(fā)現(xiàn)有下面這條和數(shù)據(jù)。
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
其實(shí)直接刪掉
Access-Control-Allow-Headers
這條配置,也能解決問題,但是枚舉出所有固定情形當(dāng)然是更安全的。
####
要獲取更多Haytham原創(chuàng)文章,請(qǐng)關(guān)注公眾號(hào)"許聚龍":
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。