跳转至

CORS(跨域资源共享)

CORS 或“跨域资源共享”指的是浏览器中运行的前端拥有与后端通信的 JavaScript 代码,而后端与前端处于不同的“源”的情况。

源是协议(httphttps)、域名(myapp.comlocalhostlocalhost.tiangolo.com)和端口(804438080)的组合。

因此,以下都是不同的源:

  • http://localhost
  • https://localhost
  • http://localhost:8080

即使它们都在 localhost 上,但使用不同的协议或端口,因此它们是不同的“源”。

步骤

假设你的前端在浏览器中运行于 http://localhost:8080,其 JavaScript 代码试图与运行在 http://localhost 的后端通信(因为我们没有指定端口,浏览器将默认使用端口 80)。

然后,浏览器将向 :80 后端发送一个 HTTP OPTIONS 请求,如果后端发送适当的头部授权来自此不同源(http://localhost:8080)的通信,那么 :8080 浏览器将允许前端中的 JavaScript 向 :80 后端发送请求。

为了实现这一点,:80 后端必须有一个“允许的源”的列表。

在这种情况下,该列表必须包含 http://localhost:8080,以便 :8080 前端能正常工作。

通配符

也可以将列表声明为 "*"(一个“通配符”)以表示允许所有源。

但这仅允许特定类型的通信,排除涉及凭据的一切:Cookie、授权头部(如与 Bearer Tokens 一起使用的那些)等。

因此,为了一切正常工作,最好明确指定允许的源。

使用 CORSMiddleware

你可以在 FastAPI 应用程序中使用 CORSMiddleware 进行配置。

  • 导入 CORSMiddleware
  • 创建一个允许的源列表(作为字符串)。
  • 将其作为“中间件”添加到你的 FastAPI 应用程序。

你还可以指定你的后端是否允许:

  • 凭据(授权头部、Cookie 等)。
  • 特定的 HTTP 方法(POSTPUT)或使用通配符 "*" 允许所有方法。
  • 特定的 HTTP 头部或使用通配符 "*" 允许所有头部。
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]

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


@app.get("/")
async def main():
    return {"message": "Hello World"}

CORSMiddleware 实现使用的默认参数默认是限制性的,因此你需要显式启用特定的源、方法或头部,以便浏览器在跨域上下文中被允许使用它们。

支持以下参数:

  • allow_origins - 应允许进行跨域请求的源列表。例如 ['https://example.org', 'https://www.example.org']。你可以使用 ['*'] 来允许任何源。
  • allow_origin_regex - 一个正则表达式字符串,用于匹配应允许进行跨域请求的源。例如 'https://.*\.example\.org'
  • allow_methods - 应允许用于跨域请求的 HTTP 方法列表。默认为 ['GET']。你可以使用 ['*'] 来允许所有标准方法。
  • allow_headers - 应支持跨域请求的 HTTP 请求头部列表。默认为 []。你可以使用 ['*'] 来允许所有头部。对于 简单 CORS 请求AcceptAccept-LanguageContent-LanguageContent-Type 头部总是被允许。
  • allow_credentials - 指示跨域请求是否应支持 Cookie。默认为 False

    如果 allow_credentials 设置为 True,则 allow_originsallow_methodsallow_headers 都不能设置为 ['*']。它们都必须被 显式指定

  • expose_headers - 指示应使浏览器可访问的任何响应头部。默认为 []

  • max_age - 设置浏览器缓存 CORS 响应的最长时间(秒)。默认为 600

该中间件响应两种特定类型的 HTTP 请求...

CORS 预检请求

这些是任何带有 OriginAccess-Control-Request-Method 头部的 OPTIONS 请求。

在这种情况下,中间件将拦截传入的请求,并使用适当的 CORS 头部进行响应,以及出于信息目的返回 200400 响应。

简单请求

任何带有 Origin 头部的请求。在这种情况下,中间件将正常传递请求,但会在响应中包含适当的 CORS 头部。

更多信息

有关 CORS 的更多信息,请查看 Mozilla CORS 文档

技术细节

你也可以使用 from starlette.middleware.cors import CORSMiddleware

FastAPIfastapi.middleware 中提供了几个中间件,只是为了方便开发者你。但大多数可用的中间件直接来自 Starlette。