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 預檢請求的有效時長


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM