CORS (跨域资源共享)¶
CORS 或“跨域资源共享”指的是浏览器中运行的前端 JavaScript 代码与后端通信,并且后端与前端处于不同“来源”的情况。
来源¶
来源是协议 (http
, https
)、域 (myapp.com
, localhost
, localhost.tiangolo.com
) 和端口 (80
, 443
, 8080
) 的组合。
所以,所有这些都是不同的来源:
https://
https://
https://:8080
即使它们都在 localhost
上,它们也使用不同的协议或端口,所以它们是不同的“来源”。
步骤¶
所以,假设你在 https://:8080
运行着一个前端,它的 JavaScript 正在尝试与运行在 https://
上的后端通信(因为我们没有指定端口,浏览器会假定默认端口 80
)。
然后,浏览器会向 :80
-后端发送一个 HTTP OPTIONS
请求,如果后端发送了适当的头信息来授权来自这个不同来源 (https://:8080
) 的通信,那么 :8080
-浏览器就会允许前端的 JavaScript 向 :80
-后端发送请求。
为了实现这一点,:80
-后端必须有一个“允许的来源”列表。
在这种情况下,该列表必须包含 https://:8080
,以便 :8080
-前端能够正常工作。
通配符¶
也可以将列表声明为 "*"
(一个“通配符”),表示允许所有来源。
但这只允许某些类型的通信,排除所有涉及凭据的通信:Cookies、Authorization 头部(如用于 Bearer Token 的)等。
所以,为了让一切正常工作,最好明确指定允许的来源。
使用 CORSMiddleware
¶
你可以在 FastAPI 应用程序中使用 CORSMiddleware
进行配置。
- 导入
CORSMiddleware
。 - 创建一个允许的来源列表(作为字符串)。
- 将其作为“中间件”添加到你的 FastAPI 应用程序中。
你还可以指定你的后端是否允许
- 凭据(授权头、Cookies 等)。
- 特定的 HTTP 方法(
POST
、PUT
)或使用通配符"*"
允许所有方法。 - 特定的 HTTP 头或使用通配符
"*"
允许所有头。
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
origins = [
"https://.tiangolo.com",
"https://.tiangolo.com",
"https://",
"https://: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 请求头列表。默认为[]
。你可以使用['*']
允许所有头。Accept
、Accept-Language
、Content-Language
和Content-Type
头总是允许用于简单 CORS 请求。-
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。