同源策略

https://www.cnblogs.com/poloyy/p/15345184.html

CORS

https://www.cnblogs.com/poloyy/p/15345871.html

FastAPI 模擬跨域問題

https://www.cnblogs.com/poloyy/p/15345763.html

需要先了解什麼是同源策略、CORS、跨域報錯栗子才能更好看懂這篇文章

先看看之前跨域請求報錯的截圖

preflight 就是預檢請求，沒有通過服務端的允許，所以訪問失敗；

  • 點下右側的箭頭，實際發起的 login 請求會高亮
  • 第一個 login 請求就是實際傳送的請求，因為預檢請求失敗，所以會報跨域錯誤

CORSMiddleware

  • CORSMiddleware 使用的預設引數在預設情況下是有限制性的，所以才有跨域問題
  • 因此需要顯式啟用特定的源、方法或 Headers，以便允許瀏覽器在跨域上下文中使用它們

allow_origins

  • 允許發出跨域請求的源列表
  • 例如  ['https://example.org', 'https://www.example.org']
  • 可以使用  ['*']  來允許任何來源

allow_methods

  • 允許跨域請求的 HTTP 方法列表
  • 預設為 ['GET']
  • 可以使用  ['*'] 來允許所有標準請求方法

allow_headers

  • 允許跨域請求攜帶的 HTTP Request Headers 列表
  • 預設為 []
  • 可以使用 ['*'] 來允許所有 Headers
  • 對於 CORS 請求，始終允許 Accept、Accept-Language、Content-Language 和 Content-Type

allow_credentials

  • 跨域請求應該支援 cookie
  • 預設為 False
  • 重點：為了允許憑據，allow_origins 不能設定為 ['*']，必須指定 origins

allow_origin_regex

  • 正則表示式字串
  • 匹配允許發出跨域請求的源

expose_headers

  • 允許瀏覽器訪問的任何 Response Headers
  • 預設為 []

max_age

  • 設定瀏覽器快取 CORS 響應的最長時間（以秒為單位），其實就是 preflight 預檢請求的結果能夠被快取多久
  • 預設為 600

使用 CORSMiddleware 解決跨域問題

#!usr/bin/env python

# -*- coding:utf-8 _*-

"""

# author: 小菠蘿測試筆記

# blog:  https://www.cnblogs.com/poloyy/

# time: 2021/9/28 12:58 下午

# file: 33_cors.py

"""

import uvicorn

from fastapi import FastAPI, Body

# 1、匯入對應的包

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 2、宣告一個 源 列表；重點：要包含跨域的客戶端 源

origins = [

    "http://localhost.tiangolo.com",

    "https://localhost.tiangolo.com",

    "http://localhost",

    "http://localhost:8080",

    # 客戶端的源

    "http://127.0.0.1:8081"

]

# 3、配置 CORSMiddleware

app.add_middleware(

    CORSMiddleware,

    allow_origins=origins,  # 允許訪問的源

    allow_credentials=True,  # 支援 cookie

    allow_methods=["*"],  # 允許使用的請求方法

    allow_headers=["*"]  # 允許攜帶的 Headers

)

# 模擬服務端 登入 介面

@app.post("/login")

def get_login(id: str = Body(...), name: str = Body(...)):

    return {"id": id, "name": name}

if __name__ == '__main__':

    # 服務端埠是 8080！

    uvicorn.run(app="33_cors1:app", reload=True, host="127.0.0.1", port=8080)

訪問瀏覽器，檢視 F12 開發者工具 Network

  • preflight 就是預檢請求，服務端允許它訪問了，所以請求成功
  • 點下右側的箭頭，實際發起的 login 請求會高亮
  • 第一個 login 請求就是實際傳送的請求，因為預檢請求成功，所以它也請求成功啦

看看 preflight 預檢請求的響應

這些就是 FastAPI 服務端設定的

看看實際 login 請求的響應頭

看看響應體