从源 Y 访问 XMLHttpRequest X 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查

Question

从源 Y 访问 XMLHttpRequest X 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我在尝试将应用程序部署到云服务器时遇到了 CORS 问题。

• 当我在本地计算机上测试应用程序时，我设法解决了这个问题（所有内容都通过

  localhost

  进行通信）
• 我相信当我只使用 IP 地址并将应用程序部署到云时我也解决了这个问题（对此不能完全确定 - 当我尝试部署它时已经是深夜了）
• 我现在有了域名，而且我现在肯定遇到了 CORS 问题

建筑

云中有一台服务器托管该系统的前端和后端。前端使用React+Vite编写，并使用nginx在80端口部署为静态站点。

后端使用Python+FastAPI编写，部署在同一服务器上运行的Docker容器内。它为 API 公开端口 5555。

FastAPI 应用程序中启用了 COSM 中间件：

from fastapi.middleware.cors import CORSMiddleware

origins = [
    'http://localhost',
    'http://localhost:80',
    'http://localhost:5555',
    'http://my-domain.co.uk',
    'http://my-domain.co.uk:80',
    'http://my-domain.co.uk:5555',
]

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

我不完全确定需要哪些端口。

这是我对CORS系统如何工作的理解：

• 浏览器向前端发出请求

  my-domain.co.uk:80

  。
• Nginx 将 html、css 和 JS 返回给浏览器
• 一些 JS 包含向

  my-domain.co.uk:5555/api/something

发出 axios 请求的代码
• 浏览器将此视为跨源请求，但仍然发出请求
• 后端服务器（FastAPI）接收请求到

  my-domain.co.uk:5000/api/something

  from

  my-domain.co.uk:80

• （我猜浏览器必须发送有关哪个网站最初为其提供 javascript 来发出下一个请求的信息？）
• 我猜测浏览器需要通过向 FastAPI 后端发送一些内容来进行飞行前检查，并且 FastAPI 后端必须回复 CORS 标头
• 这似乎并没有发生
• 然后我会猜测浏览器是否正确返回 CORS 标头，这将告诉浏览器向后端发出完整请求以获取所需数据是安全的？

我是否了解 CORS 正确工作的流程？

我查看了Chrome开发者工具的“网络”选项卡中的一些信息。我找不到任何类似

Access-Control-Allow-Origin

的标题。

什么可能导致这些缺失？

Answer 1

我希望这个答案能够帮助其他人。

首先要注意的是：如何找到与请求相关的Headers信息。

从下面的截图中可以看出，相关的 headers 显示在 API 请求中。换句话说：查看与 api 请求相关的信息，不是网站静态内容的原始 http 请求。

找到适当的标头后，您可以检查

Access-Control-Allow-Origin

地址是否正确。

其中一个值应与请求标头中的 Origin 字段匹配。

我已经在截图中标记了所有这些内容。