指路牌

• 后端配置好了跨域，但是前端在HTTP header添加token后，又產(chǎn)生跨域的問題
• Flask、Vue(Axios)、跨域

適用場景

• 前后端分離，想要使用token來管理登錄狀態(tài)，或調(diào)用后臺接口

環(huán)境

• 平臺無關(guān)

參考博客

• axios 在header中配置token信息后，向后端請求會報(bào)跨域的問題。但是用postman測試的時(shí)候沒有什么問題。

  這個(gè)問題的回答其實(shí)沒有給出直接性的幫助，甚至回答的有點(diǎn)奇怪，但是幫我打開了思路。

  

  站在用戶的角度思考問題，與客戶深入溝通，找到寒亭網(wǎng)站設(shè)計(jì)與寒亭網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋寒亭地區(qū)。

背景

出于多種考慮，放棄了使用類似WordPress這種現(xiàn)成博客解決方案，準(zhǔn)備自己搭建一個(gè)博客系統(tǒng)，技術(shù)選型為：后端：Flask，前端：Vue。登錄狀態(tài)管理放棄cookie，采用token。開發(fā)進(jìn)行到路由保護(hù)處時(shí)出現(xiàn)了CORS的問題，具體情形是Vue將從后臺獲取的token添加到HTTP請求的header中，調(diào)用相應(yīng)接口時(shí)出現(xiàn)跨域。

在此次跨域出現(xiàn)前實(shí)際上已經(jīng)在Flask通過flask_cors配置了跨域解決方案，因此跨域的產(chǎn)生是讓我十分不解的，又由于問題比較奇特在搜索引擎中沒有找到很好的解決方案(也可能是我不知道怎么描述，沒有搜出來)，因此自己重新研究可以一下跨域，又有了一些新收獲。

分析

相信使用前后端分離的開發(fā)者在開發(fā)之初就會碰到跨域的問題，跨域的解決方案有很多種，我選擇通過后臺解決。

跨域是瀏覽器同源策略導(dǎo)致的問題，網(wǎng)上相關(guān)文章很多，此處不贅述。備注一點(diǎn)：postman不會產(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)的源來訪問后臺資源，網(wǎng)上大多在此處的寫的是*，也即允許所有源，這樣很不安全，由于我此處是本地開發(fā)階段，Vue的啟動端口是8080，所以我寫的是http://127.0.0.1:8080,根據(jù)你的開發(fā)需要改成自己需要的三元組即可。

其次Access-Control-Allow-Methods，也是字面上的意思，允許用的HTTP的Method有哪些，GET，POST是最常見的，此處只寫了兩個(gè)，如果你需要使用其他Method，在這里要寫進(jìn)來，否則也會會出現(xiàn)跨域問題。

以上兩個(gè)配置都沒有問題，問題在了最后一部分：

Access-Control-Allow-Headers，和上面兩個(gè)一樣，字面的意思，之所以是她出問題了，是因?yàn)槲覀冊谇岸私oHTTP請求添加了一個(gè)自定義的字段token，而這不在許可范圍內(nèi)(許可的只有x-requested-with和content-type )，因此被判定為了不符合同源策略的非法請求，所以我們只需要將自定義的header添加進(jìn)去即可。答案已經(jīng)出來了。

繼續(xù)挖一下，這個(gè)字段的兩個(gè)含義分別還是什么？x-requested-with,content-type.

x-requested-with是一個(gè)用來判斷客戶端請求是否由Ajax發(fā)起的，所以和Axios有什么關(guān)系？答案是：沒有關(guān)系...可以直接刪了。貼上這段代碼的人或者是默認(rèn)了發(fā)起請求使用的是Ajax，又或者沒有分析字段含義，所以很直接貼了這段代碼，但是對于使用Axios的開發(fā)者來說，這個(gè)字段不是必然的。

content-type: 指明POST請求的數(shù)據(jù)格式以及編碼方式。數(shù)據(jù)格式最常見的莫過于josn，其形式如下：application/json在后端打印出POST請求的HTTP Header，就會發(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)文章，請關(guān)注公眾號"許聚龍":

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：再遇CORS--自定義HTTPheader的導(dǎo)致跨域-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://aaarwkj.com/article44/dppiee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、域名注冊、移動網(wǎng)站建設(shè)、網(wǎng)站排名、小程序開發(fā)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)