再遇CORS -- 自定義HTTP header的致使跨域

指路牌

• 後端配置好了跨域，可是前端在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原創文章，請關注公衆號"許聚龍":