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、与 Bearer Token 一起使用的 Authorization 头等。
因此,为了所有功能正常工作,最好明确指定允许的源。
使用 CORSMiddleware
¶
您可以使用 CORSMiddleware
在您的 FastAPI 应用程序中配置它。
- 导入
CORSMiddleware
。 - 创建一个允许的源列表(字符串形式)。
- 将其作为“中间件”添加到您的 FastAPI 应用程序中。
您还可以指定您的后端是否允许
- 凭据(Authorization 头、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
- 指示是否应支持跨域请求的 cookies。默认为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。