Flask解決跨域問題

抱緊小洪發表於2023-11-10
Flask跨域

什麼是跨域問題

跨域問題指的是瀏覽器限制了從一個源（協議、域名、埠）訪問另一個源的資源的行為，這個限制是瀏覽器的一個安全機制。如果一個網頁從一個源載入了另一種型別的資源（例如 HTML、CSS、指令碼或影像）但是資源的來源是不同的源，那麼就會發生跨域問題。

當一個請求url的協議、域名、埠三者之間任意一個與當前頁面url不同即為跨域

當前頁面url 被請求頁面url 是否跨域 原因
http://www.xxma.com/ http://www.xxma.com/index 否 同源(協議、域名、埠號相同)
http://www.xxma.com/ https://www.xxma.com/ 是 協議不同(http/https)
http://www.xxma.com/ http://www.xm.com/ 是 主域名不同
http://www.xxma.com/ http://cnblog.xxma.com/ 是 子域名不同
http://www.xxma.com:8080/ http://www.xxma.com:8081/ 是 埠號不同

實際解決

1.下載flask_cors 包

pip install flask-cors

2.使用flask_cors的CORS

app初始化的時候就載入配置


from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
# r'/*' 是萬用字元，讓本伺服器所有的 URL 都允許跨域請求
CORS(app, resources=r'/*')
if __name__ == "__main__":
    app.run()

配置引數說明

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

3.在被請求的Response header中加入header

middlewares.py中加入

def add_cors_headers(response: Flask.response_class) -> Flask.response_class:
    response.headers.set("Access-Control-Allow-Origin", "*")
    response.headers.set("Access-Control-Allow-Headers", "*")
    response.headers.set("Access-Control-Allow-Methods", "*")
    return response

# 在請求上下文中新增中介軟體函式
def setup_middlewares(app: Flask) -> None:
    app.after_request(add_cors_headers)

相關文章