Movatterモバイル変換


[0]ホーム

URL:


跳转至
Join theFastAPI Cloud waiting list 🚀
Follow@fastapi onX (Twitter) to stay updated
FollowFastAPI onLinkedIn to stay updated
Subscribe to theFastAPI and friends newsletter 🎉
sponsor
sponsor
sponsor
sponsor
sponsor
sponsor
sponsor
sponsor
sponsor
sponsor
sponsor

CORS(跨域资源共享)

🌐 由 AI 与人类协作翻译

本翻译由人类引导的 AI 生成。🤝

可能存在误解原意或不够自然等问题。🤖

你可以通过帮助我们更好地引导 AI LLM来改进此翻译。

英文版本

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

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

因此,这些都是不同的源:

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

即使它们都在localhost 中,但是它们使用不同的协议或者端口,所以它们都是不同的「源」。

步骤

假设你的浏览器中有一个前端运行在http://localhost:8080,并且它的 JavaScript 正在尝试与运行在http://localhost 的后端通信(因为我们没有指定端口,浏览器会采用默认的端口80)。

然后,浏览器会向:80 的后端发送一个 HTTPOPTIONS 请求,如果后端发送适当的 headers 来授权来自这个不同源(http://localhost:8080)的通信,那么运行在:8080 的浏览器就会允许前端中的 JavaScript 向:80 的后端发送请求。

为此,:80 的后端必须有一个「允许的源」列表。

在这种情况下,它必须包含http://localhost:8080,这样:8080 的前端才能正常工作。

通配符

也可以使用"*"(一个「通配符」)声明这个列表,表示全部都是允许的。

但这仅允许某些类型的通信,不包括所有涉及凭据的内容:比如 Cookies,以及那些使用 Bearer 令牌的 Authorization 请求头等。

因此,为了一切都能正常工作,最好显式地指定允许的源。

使用CORSMiddleware

你可以在FastAPI 应用中使用CORSMiddleware 来配置它。

  • 导入CORSMiddleware
  • 创建一个允许的源列表(由字符串组成)。
  • 将其作为「中间件」添加到你的FastAPI 应用中。

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

  • 凭证(Authorization 请求头、Cookies 等)。
  • 特定的 HTTP 方法(POSTPUT)或者使用通配符"*" 允许所有方法。
  • 特定的 HTTP 请求头或者使用通配符"*" 允许所有请求头。
fromfastapiimportFastAPIfromfastapi.middleware.corsimportCORSMiddlewareapp=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("/")asyncdefmain():return{"message":"Hello World"}

默认情况下,这个CORSMiddleware 实现所使用的默认参数较为保守,所以你需要显式地启用特定的源、方法或者 headers,以便浏览器能够在跨域上下文中使用它们。

支持以下参数:

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

    allow_credentials 设为True 时,allow_originsallow_methodsallow_headers 都不能设为['*']。它们必须显式指定

  • expose_headers - 指示可以被浏览器访问的响应头。默认为[]

  • max_age - 设定浏览器缓存 CORS 响应的最长时间,单位是秒。默认为600

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

CORS 预检请求

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

在这种情况下,中间件将拦截传入的请求并进行响应,出于提供信息的目的返回一个使用了适当的 CORS headers 的200400 响应。

简单请求

任何带有Origin 请求头的请求。在这种情况下,中间件将像平常一样传递请求,但是在响应中包含适当的 CORS headers。

更多信息

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

技术细节

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

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


[8]ページ先頭

©2009-2026 Movatter.jp