Flask配置Cors跨域

1 跨域的理解

跨域是指：瀏覽器A從服務器B獲取的靜態資源，包括Html、Css、Js，而後在Js中經過Ajax訪問C服務器的靜態資源或請求。即：瀏覽器A從B服務器拿的資源，資源中想訪問服務器C的資源。

同源策略是指：瀏覽器A從服務器B獲取的靜態資源，包括Html、Css、Js，爲了用戶安全，瀏覽器加了限制，其中的Js經過Ajax只能訪問B服務器的靜態資源或請求。即：瀏覽器A從哪拿的資源，那資源中就只能訪問哪。

同源是指：同一個請求協議(如：Http或Https)、同一個Ip、同一個端口，3個所有相同，即爲同源。

2 跨域的處理

跨域的這種需求仍是有的，所以，W3C組織制定了一個Cross-Origin Resource Sharing規範，簡寫爲Cors，如今這個規範已經被大多數瀏覽器支持，從而，處理跨域的需求。

Cors須要在後端應用進行配置，所以，是一種跨域的後端處理方式，這麼作也容易理解，一個你不認識的源來訪問你的應用，天然須要應用進行受權。除了後端處理方式，也有前端的解決方案，如：JSONP，因這裏咱們主要講解Flask對Cors的配置，暫不對前端解決方案進行詳細說明。

3 跨域的分類

跨域分爲如下3種

名稱	英文名	說明
簡單請求	Simple Request	發起的Http請求符合： 1.無自定義請求頭， 2.請求動詞爲GET、HEAD或POST之一， 3.動詞爲POST時，Content-Type是application/x-www-form-urlencoded， multipart/form-data或text/plain之一
預檢請求	Preflighted Request	發起的Http請求符合其中之一： 1.包含了自定義請求頭， 2.請求動詞不是GET、HEAD或POST， 3.動詞是POST時， Content-Type不是application/x-www-form-urlencoded， multipart/form-data或text/plain。 即：簡單請求的相反
憑證請求	Requests with Credential	發起的Http請求中帶有憑證

4 Flask配置Cors

Flask配Cors跨域，使用Flask-CORS包，詳細文檔，參見: https://flask-cors.readthedocs.io/en/latest/，總的來講，flask-cors包也提供了兩種方式

方式	範圍	說明
@cross_origin裝飾器	配置單個路由	適用於配置特定的API接口
CORS函數	配置全局API接口	適用於全局的API接口配置

3.1 安裝flask-cors

pip install flask-cors

3.2 使用@cross_origin裝飾器

@app.route("/")
@cross_origin()
def helloWorld():
  return "Hello, cross-origin-world!"

裝飾器參數	類型	Head字段	說明
origins	列表、字符串或正則表達式	Access-Control-Allow-Origin	配置容許跨域訪問的源， *表示所有容許
methods	列表、字符串	Access-Control-Allow-Methods	配置跨域支持的請求方式， 如：GET、POST
expose_headers	列表、字符串	Access-Control-Expose-Headers	自定義請求響應的Head信息
allow_headers	列表、字符串或正則表達式	Access-Control-Request-Headers	配置容許跨域的請求頭
supports_credentials	布爾值	Access-Control-Allow-Credentials	是否容許請求發送cookie， false是不容許
max_age	整數、字符串	Access-Control-Max-Age	預檢請求的有效時長

3.3 使用CORS函數

3.3.1 應用全局配置

app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route("/api/v1/users")
def list_users():
  return "user example"

3.3.2 單獨Blueprints配置

api_v1 = Blueprint('API_v1', __name__)
CORS(api_v1) 

@api_v1.route("/api/v1/users/")
def list_users():
  return "user example"

3.3.3 CORS參數說明

參數	類型	Head字段	說明
resources	字典、迭代器或字符串	無	全局配置容許跨域的API接口
origins	列表、字符串或正則表達式	Access-Control-Allow-Origin	配置容許跨域訪問的源， *表示所有容許
methods	列表、字符串	Access-Control-Allow-Methods	配置跨域支持的請求方式， 如：GET、POST
expose_headers	列表、字符串	Access-Control-Expose-Headers	自定義請求響應的Head信息
allow_headers	列表、字符串或正則表達式	Access-Control-Request-Headers	配置容許跨域的請求頭
supports_credentials	布爾值	Access-Control-Allow-Credentials	是否容許請求發送cookie， false是不容許
max_age	整數、字符串	Access-Control-Max-Age	預檢請求的有效時長