## 指路牌
* 後端配置好了跨域，但是前端在HTTP header新增token後，又產生跨域的問題 
* Flask、Vue(Axios)、跨域

## 適用場景
* 前後端分離，想要使用token來管理登入狀態，或呼叫後臺介面

## 環境
* 平臺無關

## 參考部落格
* [axios 在header中配置token資訊後，向後端請求會報跨域的問題。但是用postman測試的時候沒有什麼問題。](https://segmentfault.com/q/1010000017757881)
> 這個問題的回答其實沒有給出直接性的幫助，甚至回答的有點奇怪，但是幫我開啟了思路。

## 背景
出於多種考慮，放棄了使用類似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原創文章，請關注公眾號"許聚龍":***
![我的微信公眾號](https://user-images.githubusercontent.com/37465243/63688227-5b2ede00-c839-11e9-9aa9-2b461444f463.png)

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

相關文章