FastAPI 中的 CORS 错误：如何正确设置原点？答案

【问题标题】：CORS error in FastAPI: How to set origin correctly?FastAPI 中的 CORS 错误：如何正确设置原点？
【发布时间】：2022-06-30 21:22:43
【问题描述】：

来自不同域的前端应用程序（比如122.133.2.5）向我的后端应用程序（也使用授权）发送请求。

这是我应用的配置：

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = ["http://122.133.2.5"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

通常，前端应用程序应该在 122.133.2.5（IP 地址）启动并运行 - 重定向到 122.133.2.5/account/login_page - 但它会引发 CORS 错误。我检查了FastAPI documentation 和 Stackoverflow 对类似问题的解决方案，但错误仍然存在。 Starlette's 和FastAPI's 中间件我都试过了，但没有任何区别。

我最好的猜测是我没有正确设置原点。官方文档指出：

来源是协议（http、https）、域（myapp.com、localhost、localhost.tiangolo.com）和端口（80、443、8080）的组合。

就我而言，我设置了协议和域，但没有设置端口。根据前端开发者的说法，这个应用程序没有特定的端口——他只是在相同 IP 地址的虚拟机上启动它。我的后端和前端 IP 都属于同一个内部网络，因此无法通过网络访问它们。前端是用 AngularJS 编写的。

也许我应该使用allow_origin_regex？但是，我不确定如何设置。

有什么帮助吗？

编辑：

Cors 错误：

跨域请求被阻止：同源策略不允许读取位于http://122.133.2.5:8000/token 的远程资源。（原因：CORS 预检响应未成功）。状态码：404。

跨域请求被阻止：同源策略不允许读取位于http://122.133.2.5:8000/token 的远程资源。（原因：CORS 请求未成功）。状态码：null。

【问题讨论】：

预检请求必须获得状态在2xx 范围内的响应，才能将预检视为成功。弄清楚为什么预检请求会收到 404 响应并首先修复它。 /token 端点是否配置了 CORS？
你也试过加 https 吗？
404s 不能与 corsmiddleware 一起使用，但端口（所以 :8000）也必须是您的源条目的一部分，如下 Chris 所述。

标签： python angular cors fastapi

【解决方案1】：

您可能忘记了端口，无论是默认的 8000 还是其他的（例如，如果您运行 vue.js 应用程序，则为 8080）。

所以解决办法就是把原点改成这个：

origins = ["http://122.133.2.5:8000"]
# or
origins = ["http://122.133.2.5:8080"]

【讨论】：

【解决方案2】：

根据 FastAPI documentation:

来源是协议（http、https）、域的组合（myapp.com、localhost、localhost.tiangolo.com）和端口（@987654328@， 443, 8080)。

所以，所有这些都是不同的起源：

http://localhost

https://localhost

http://localhost:8080

即使他们都在localhost，他们使用不同的协议或端口，所以，它们是不同的“起源”。

因此，您还应该定义端口号。 angular 的默认端口是4200。您可以在angular.json 中找到specify a port per "project"。因此，在该文件中查找port 编号和/或检查在运行AngularJS 应用程序时（从终端）是否指定了端口。如果端口号是@ 987654335@（因为这可能是您能够在不指定端口的情况下访问http://122.133.2.5 的前端的原因 - 当您不指定端口时，浏览器假定默认端口 80），那么您应该添加来源：http://122.133.2.5:80.

您还应该检查请求是否通过，如果使用['*']（允许任何来源 - 用于测试目的），因为Status code: 404（在您提供的错误响应中）表明服务器找不到请求资源。

【讨论】：