同源策略
https://www.cnblogs.com/poloyy/p/15345184.html
CORS
https://www.cnblogs.com/poloyy/p/15345871.html
需要先了解什麼是同源策略和 CORS 才能更好看懂這篇文章
目錄結構
— root/
|
|—static/
| |
| |—jquery.min.js
|
|— cors_client.py
|— cors_server.py
|
cors_client.py 程式碼
主要模擬客戶端
前提
為了使用
from fastapi.staticfiles import StaticFiles
需要先安裝 aipfiles
pip install aiofiles
靜態資原始檔的使用教程後面再寫
實際程式碼
#!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.responses import HTMLResponse
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles app = FastAPI() # 繫結靜態資原始檔夾（後面詳解）
app.mount("/static", StaticFiles(directory="static"), name="static") @app.get("/")
def get_login():
# 返回一段 HTML 程式碼
html = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
url:"http://127.0.0.1:8080/login",
type:"POST",
data:JSON.stringify({
"id":1,
"name":"小菠蘿"
}),
contentType:"application/json",
success:function (rsp) {
console.log(rsp)
}
})
</script>
</body>
</html>
"""
return HTMLResponse(html) if __name__ == '__main__':
# 客戶端是 8081 埠！
uvicorn.run(app="33_cors:app", reload=True, host="127.0.0.1", port=8081)
那段 ajax 程式碼就是模擬跨域請求服務端，服務端域名雖然也是 127.0.0.1，但埠是 8081，是一個跨域請求
cors_server.py 程式碼
主要模擬服務端
#!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 app = FastAPI() # 模擬服務端 登入 介面
@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="0.0.0.0", port=8080)
開始模擬跨域請求場景
同時執行 cors_client.py、cors_server.py 的 uvicorn 伺服器，其實就執行下兩個 Python 檔案就行啦
- preflight 就是預檢請求，沒有通過服務端的允許，所以訪問失敗；
- 點下右側的箭頭，實際發起的 login 請求會高亮
- 第一個 login 請求就是實際傳送的請求，因為預檢請求失敗，所以會報跨域錯誤
- 檢視預檢請求，請求方法是 options
- Console 可以看到有跨域報錯的提示，缺少Access-Control-Allow-Origin 響應頭
- 所以瀏覽器不允許把請求傳送到 127.0.0.1:8081 源上
- 訪問 127.0.0.1:8081，檢視 F12 開發者工具-Networ
FastAPI 如何使用 CORS 來解決跨域問題？
https://www.cnblogs.com/poloyy/p/15347578.html