云部署React+FastAPI应用遭遇CORS跨域问题求助

错误信息 #

Access to XMLHttpRequest X from origin Y has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题场景 #

• 本地localhost测试时已解决CORS问题，部署到云服务器绑定域名后问题复现
• 曾用IP部署到云时疑似解决该问题

架构说明 #

• 云服务器同时部署前后端
• 前端：React+Vite，通过Nginx以静态站点形式部署在80端口
• 后端：Python+FastAPI，部署在同服务器的Docker容器中，API暴露5555端口

配置情况 #

FastAPI已启用CORSMiddleware，配置代码如下：

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流程的理解 #

1. 浏览器向my-domain.co.uk:80的前端发起请求
2. Nginx返回HTML、CSS和JS给浏览器
3. JS中包含向my-domain.co.uk:5555/api/something发起axios请求的代码
4. 浏览器将其视为跨域请求并发起
5. FastAPI后端收到来自my-domain.co.uk:80、发往my-domain.co.uk:5000/api/something的请求
6. 推测浏览器会发送来源信息，随后需向FastAPI发送预检请求，后端需返回CORS响应头，但当前未出现该情况
7. 若正确获取CORS头，浏览器会发起完整请求获取数据

疑问 #

1. 上述CORS流程的理解是否正确？
2. Chrome开发者工具Network标签中未找到Access-Control-Allow-Origin头，可能的原因是什么？

问题解答 #

1. CORS流程理解的正确性 #

整体流程框架正确，但有两处细节需要修正：

• 步骤5中请求端口应为5555而非5000（推测是笔误），因为后端API暴露的是5555端口
• 预检请求（OPTIONS请求）是浏览器自动触发的：只要判断请求属于跨域复杂请求（比如带自定义头、非GET/POST简单方法等），就会先发送OPTIONS请求确认后端允许跨域，再发送实际业务请求，并非需要手动触发。

2. 未找到Access-Control-Allow-Origin头的可能原因 #

• FastAPI中间件未生效：检查Docker容器是否正确映射5555端口、后端服务是否正常启动；同时确认add_middleware代码是否在路由定义之前执行（FastAPI中间件需在路由前添加才会生效）。
• 域名配置不匹配：浏览器请求的Origin头不会包含默认80端口，所以http://my-domain.co.uk:80可以从origins中移除，只保留http://my-domain.co.uk；另外要确认前端实际访问的域名是否和配置完全一致（比如是否带www前缀），Origin不匹配时后端不会返回CORS头。
• Nginx拦截或代理异常：如果前端通过Nginx反向代理访问后端，需确认Nginx是否转发了Origin头，是否拦截了OPTIONS预检请求未转发到后端；同时避免Nginx和FastAPI同时配置CORS导致冲突。
• 浏览器缓存干扰：浏览器可能缓存了之前的错误响应，尝试清除缓存或用无痕模式重新测试。
• Docker网络连通问题：确认Docker容器和主机网络互通，后端服务能接收来自主机80端口的请求，而非仅允许容器内部访问。

内容的提问来源于stack exchange，提问作者user2138149