FastAPI（38）- 模擬一個跨域場景

本文轉載自查看原文 2021-09-28 15:50 137 測試高級進階技能系列 - FastAPI/ FastAPI

同源策略

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

CORS

需要先了解什么是同源策略和 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

免責聲明！

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

猜您在找 FastApi跨域 FastAPI--跨域處理(7) 跨域的原因，場景，方法 FastAPI（39）- 使用 CORS 解決跨域問題本地項目模擬跨域請求 Nginx跨域了解及模擬和解決 express+cors模擬解決跨域 FastAPI 中間件(三) 跨域資源共享中間件 FastAPI 學習之路（三十一）CORS（跨域資源共享）跨域方案JSONP與CORS的各自優缺點以及應用場景