Python高性能web框架-FastApi教程：（20）CORS组件实现跨域请求

最新推荐文章于 2025-04-09 18:00:36 发布

Python涛哥

最新推荐文章于 2025-04-09 18:00:36 发布

阅读量442

点赞数 4

文章标签： python fastapi

本文链接：https://blog.youkuaiyun.com/tao5090694/article/details/144830234

版权

（20）CORS组件实现跨域请求

1. 同源请求

我们之前所写的fastapi请求，都是同源请求。也就是协议、IP和端口这三要素和当前页面一致http://127.0.0.1:8080/。下面是一个最简单的fastapi的同源请求

import uvicorn
from fastapi import FastAPI

app = FastAPI()


@app.get('/user')
async def get_user():
    return {'user': 'current user'}


if __name__ == '__main__':
    uvicorn.run('main:app', host='127.0.0.1', port=8080, reload=True, workers=1)

2. 跨域请求

协议、IP和端口这三个要素但凡有一个不一致，那么这次发送的请求就是跨域请求。

我们用jquery写个ajxa请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入jQuery库，用于简化后续的DOM操作和Ajax请求 -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>

<p>hello world</p>
<script>
    // 为所有p元素添加点击事件监听器
    $("p").click(function (){
        // 使用Ajax发起GET请求获取用户数据
        $.ajax({
            url:"http://127.0.0.1:8080/user",
            success:function (data){
                // 请求成功后，在控制台输出用户信息
                console.log(data.user); // 响应`main.py`里的函数返回值
            }
        })
    });
</script>

</body>
</html>

根据代码来看，我们点击hell world，控制台会给个'user': 'current user'的响应。

测试看下：

在这里插入图片描述

我们发现，请求被阻止了。提示缺少Access-Control-Allow-Origin头。

根据上节课学的中间件，我们可以给响应加个响应头：

main.py

import uvicorn
from fastapi import FastAPI, Request

app = FastAPI()


@app.middleware('http')
async def add_header(request: Request, call_next):
    # 请求代码块
    # 无

    response = await call_next(request)

    # 响应代码块
    # # 设置响应头，*代表允许所有来源的跨域请求
    response.headers['Access-Control-Allow-Origin'] = '*' # 或者指定IP
    return response


@app.get('/user')
async def get_user():
    return {'user': 'current user'}


if __name__ == '__main__':
    uvicorn.run('main:app', host='127.0.0.1', port=8080, reload=True, workers=1)

这个时候，我们就可以请求到了

在这里插入图片描述

我们在F12里还可以另外看到自己加的响应头：
在这里插入图片描述

3. `CORS 中间件`

跨源资源共享（CORS）是一个安全特性，允许或限制网页上的资源可以被另一个域名的网页访问。在 API 开发中配置 CORS 是常见需求，尤其是当你的前端和后端部署在不同的域时。

# 配置 CORS 中间件 
# 上面要导入：from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE"],
    allow_headers=["X-Custom-Header", "Content-Type"],
)