CORS(跨域资源共享)¶
CORS 或“跨域资源共享”指的是浏览器中运行的前端拥有与后端通信的 JavaScript 代码,而后端与前端处于不同的“源”的情况。
源¶
源是协议(http、https)、域名(myapp.com、localhost、localhost.tiangolo.com)和端口(80、443、8080)的组合。
因此,以下都是不同的源:
http://localhosthttps://localhosthttp://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 方法(
POST、PUT)或使用通配符"*"允许所有方法。 - 特定的 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 请求,Accept、Accept-Language、Content-Language和Content-Type头部总是被允许。-
allow_credentials- 指示跨域请求是否应支持 Cookie。默认为False。如果
allow_credentials设置为True,则allow_origins、allow_methods和allow_headers都不能设置为['*']。它们都必须被 显式指定。 -
expose_headers- 指示应使浏览器可访问的任何响应头部。默认为[]。 max_age- 设置浏览器缓存 CORS 响应的最长时间(秒)。默认为600。
该中间件响应两种特定类型的 HTTP 请求...
CORS 预检请求¶
这些是任何带有 Origin 和 Access-Control-Request-Method 头部的 OPTIONS 请求。
在这种情况下,中间件将拦截传入的请求,并使用适当的 CORS 头部进行响应,以及出于信息目的返回 200 或 400 响应。
简单请求¶
任何带有 Origin 头部的请求。在这种情况下,中间件将正常传递请求,但会在响应中包含适当的 CORS 头部。
更多信息¶
有关 CORS 的更多信息,请查看 Mozilla CORS 文档。
技术细节
你也可以使用 from starlette.middleware.cors import CORSMiddleware。
FastAPI 在 fastapi.middleware 中提供了几个中间件,只是为了方便开发者你。但大多数可用的中间件直接来自 Starlette。