CORS 或者「跨域资源共享」 指浏览器中运行的前端拥有与后端通信的 JavaScript 代码,而后端处于与前端不同的「源」的情况。
源
源是协议(http,https)、域(myapp.com,localhost,localhost.tiangolo.com)以及端口(80、443、8080)的组合。
因此,这些都是不同的源:
-
http://localhost
-
https://localhost
-
http://localhost:8080
即使它们都在 localhost 中,但是它们使用不同的协议或者端口,所以它们都是不同的「源」。
步骤
假设你的浏览器中有一个前端运行在 http://localhost:8080,并且它的 JavaScript 正在尝试与运行在 http://localhost 的后端通信(因为我们没有指定端口,浏览器会采用默认的端口 80)。
然后,浏览器会向后端发送一个 HTTP OPTIONS 请求,如果后端发送适当的 headers 来授权来自这个不同源(http://localhost:8080)的通信,浏览器将允许前端的 JavaScript 向后端发送请求。
为此,后端必须有一个「允许的源」列表。
在这种情况下,它必须包含 http://localhost:8080,前端才能正常工作。
通配符
也可以使用 "*"(一个「通配符」)声明这个列表,表示全部都是允许的。
但这仅允许某些类型的通信,不包括所有涉及凭据的内容:像 Cookies 以及那些使用 Bearer 令牌的授权 headers 等。
因此,为了一切都能正常工作,最好显式地指定允许的源。
我们看下Fastapi中如何使用,使用CCORS,
使用 CORSMiddleware
你可以在 FastAPI 应用中使用 CORSMiddleware 来配置它。
-
导入 CORSMiddleware。
-
创建一个允许的源列表(由字符串组成)。
-
将其作为「中间件」添加到你的 FastAPI 应用中。
你也可以指定后端是否允许:
-
凭证(授权 headers,Cookies 等)。
-
特定的 HTTP 方法(POST,PUT)或者使用通配符 "*" 允许所有方法。
-
特定的 HTTP headers 或者使用通配符 "*" 允许所有 headers。
我们看下代码
from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware app = FastAPI() origins = [ "http://localhost" ] app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["GET"], allow_headers=["*"], ) @app.post("/") def main(): return {"message": "Hello World"}
其实在实际的开发中,使用起来很简单。
文章首发在公众号,欢迎关注。