FastAPI系列:如何配置跨域访问(CORS)

默认情况下,FastAPI应用程序不允许来自不同来源的请求。当你有一个前端应用程序与后端API通信,并且它们托管在不同的域或端口上时,在FastAPI中允许来自不同来源的请求是一种常见的场景。这被称为CORS(跨域资源共享),它需要一些配置才能正常工作。这篇实用的文章将向您展示如何在FastAPI中启用CORS。让我们卷起袖子向前走吧!

介绍CORS

CORS(跨来源资源共享,Cross-Origin Resource Sharing) 是一种浏览器机制,用于控制网页从一个源(域、协议和端口)向另一个源请求资源的安全策略。CORS 允许服务器在响应头中设置特定的 HTTP 头(如 Access-Control-Allow-Origin),以指示浏览器允许哪些跨域请求。
在这里插入图片描述

同源策略简介

在深入理解 CORS 之前,首先需要了解同源策略。同源策略是浏览器的一种安全机制,限制了来自不同源的文档或脚本之间的交互。两个 URL 如果协议、域名和端口都相同,则认为是同源;否则,即为跨源。

同源策略的目的

  • 防止恶意网站读取或篡改其他网站的数据。
  • 保护用户的隐私和安全。

CORS 的工作原理

当一个网页向不同源的服务器发送请求时,浏览器会自动添加一个 Origin 头,指示请求的来源。服务器根据 Origin 头决定是否允许该请求,并在响应中添加 Access-Control-Allow-Origin 头。

主要步骤

  1. 预检请求(Preflight Request):对于某些跨域请求(如带有自定义头部、使用非简单方法如 PUTDELETE),浏览器会先发送一个 OPTIONS 请求,询问服务器是否允许该跨域请求。
  2. 服务器响应:服务器在响应中包含 Access-Control-Allow-Origin 等相关头部,指示浏览器是否允许该请求。
  3. 实际请求:如果预检通过,浏览器会发送实际的跨域请求,并根据服务器的响应决定是否处理返回的数据。
    在这里插入图片描述

CORS 相关的 HTTP 头

  • Access-Control-Allow-Origin

    • 指定允许访问资源的源。可以使用具体的域名(如 https://example.com)或 * 表示允许所有源。

    • 示例:

      Access-Control-Allow-Origin: https://example.com
      
  • Access-Control-Allow-Methods

    • 指定允许的 HTTP 方法(如 GET, POST, PUT)。

    • 示例:

      Access-Control-Allow-Methods: GET, POST, PUT
      
  • Access-Control-Allow-Headers

    • 指定允许的自定义请求头。

    • 示例:

      Access-Control-Allow-Headers: Content-Type, Authorization
      
  • Access-Control-Allow-Credentials

    • 指示是否允许发送凭证信息(如 Cookies)。当设置为 true 时,Access-Control-Allow-Origin 不能使用 *

    • 示例:

      Access-Control-Allow-Credentials: true
      

CORS 的类型

  1. 简单请求(Simple Request)
    • 使用 GETPOSTHEAD 方法。
    • 仅使用 AcceptAccept-LanguageContent-LanguageContent-Type(仅限 application/x-www-form-urlencodedmultipart/form-datatext/plain)等头。
    • 不需要预检请求。
  2. 预检请求(Preflighted Request)
    • 不属于简单请求的情况,如使用 PUTDELETE 方法,或包含自定义头部。
    • 需要先发送 OPTIONS 请求,询问服务器是否允许该跨域请求。

CORS 的优缺点

优点

  • 提高了 Web 应用的灵活性,允许不同源之间的资源交互。
  • 支持现代 Web 开发中的许多功能,如第三方 API 调用、CDN 资源加载等。

缺点

  • 增加了复杂性,需要服务器端正确配置响应头。
  • 可能带来安全隐患,如果配置不当,可能导致跨站请求伪造(CSRF)等攻击。

CORSMiddleware中间件

FastApi中可以启用CORS的最佳方法是使用cor中间件模块。该模块允许您指定API将从跨域请求中接受的允许的源、方法、头和凭据列表。您还可以使用通配符(*)来允许所有的起源、方法或头,但出于安全原因不建议这样做。

一般来说,设置CORS的步骤如下:

  • 从fastapi.middleware.cors导入CORSMiddleware 中间件
  • 创建一个允许的请求源的列表(作为字符串)
  • 使用app.add_middleware()方法将CORSMiddleware作为中间件添加到FastAPI应用程序中
  • 将允许的请求源列表和想要配置的任何其他参数(例如allow_credentials, allow_methods或allow_headers)传递给中间件。

让我们看一下下面的例子,以便更清楚地了解。

允许来自域列表的请求

在这个例子中,我们限制FastAPI只接受来自特定来源的传入请求,方法和头的数量有限。

示例代码:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Allow these origins to access the API
origins = [
    "http://localhost",
    "https://localhost:3000",
    "https://tools.domain.com",
    "https://www.domain.com",
]

# Allow these methods to be used
methods = ["GET", "POST", "PUT", "DELETE"]

# Only these headers are allowed
headers = ["Content-Type", "Authorization"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=methods,
    allow_headers=headers,
)

@app.get("/")
async def main():
    return {"message": "Welcome to My Home"}

允许来自任何域的请求

在某些情况下,特别是在开发和测试软件时,你可能希望从API中删除任何限制。下面的代码演示了如何做到这一点:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
async def main():
    return {"message": "Welcome to Sling Academy"}

最后总结

本文介绍了CORS,以及如何在FastApi中通过中间件方式灵活实现。

### 配置 FastAPI 中的 CORS 为了使 FastAPI 支持资源共享 (CORS),可以利用 `fastapi.middleware.cors` 模块中的 `CORSMiddleware` 来完成配置。具体操作涉及导入必要的组件并将其应用到应用程序实例上。 #### 导入所需库 首先,需引入两个主要类:`FastAPI` 和 `CORSMiddleware`: ```python from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware ``` #### 创建 FastAPI 实例 接着创建一个 FastAPI 应用程序对象: ```python app = FastAPI() ``` #### 添加中间件 通过调用 `add_middleware()` 方法向应用程序添加 CORS 中间件,并指定允许哪些源发起请求以及是否支持凭证共享等功能: ```python app.add_middleware( CORSMiddleware, allow_origins=["*"], # 或者定义具体的名列表 allow_credentials=True, # 如果不需要携带凭据,则设为 False allow_methods=["*"], # 可选参数,默认已包含 GET/POST 等常见方法 allow_headers=["*"] # 同样可以选择性地限定头部字段范围 ) ``` 以上设置表示该 API 接口接受来自任何地方(即 `"*"`, 表示所有来源)发出的 HTTP 请求,并且客户端可以在发送请求时附带认证信息(如 Cookies),同时不限制HTTP动词和自定义头文件[^1]。 对于更严格的控制场景,比如只允许特定网站访问服务端资源而不让其他站点随意读取数据,应该将 `allow_origins` 参数替换为实际要授权的目标站地址数组形式,例如 `["https://example.com", "http://localhost:8080"]`,并且根据需求调整其余选项值[^3]。 最后,在此之后就可以正常编写业务逻辑代码了,像这样定义简单的GET接口返回消息给前端页面: ```python @app.get("/hello") async def read_root(): return {"message": "Hello, FastAPI!"} ``` 上述过程展示了完整的 CORS 设置流程,确保前后端交互顺畅的同时也保障了一定程度的安全性[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值