React前端访问外部域名映射的Docker部署FastAPI被CORS拦截怎么办

• 首先修正CORS配置冲突
  FastAPI底层依赖的Starlette框架的CORSMiddleware不允许allow_origins设为*的同时开启allow_credentials=True，该配置冲突会导致CORS头不生效，内网能正常访问通常是因为部分内网请求没有触发CORS预检规则。
  根据你的业务场景调整配置：
  1. 需要跨域请求携带凭证（Cookie、Authorization头等）的场景
     明确列出所有允许的跨域源，禁止用*：

  app = FastAPI()
  origins = [
      "https://example2.com",
      # 其他需要授权的跨域域名依次添加即可
  ]
  app.add_middleware(
      CORSMiddleware,
      allow_origins=origins,
      allow_credentials=True,
      allow_methods=["*"],
      allow_headers=["*"],
  )
  

  2. 不需要携带凭证的场景
     关闭allow_credentials即可使用*通配符：

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

• 检查外网映射的反向代理层配置
  这是外网暴露后CORS失效最常见的原因：
  1. 确认反向代理（Nginx、云服务商网关、CDN等）没有拦截OPTIONS预检请求，必须将所有OPTIONS请求转发给FastAPI服务处理，不要直接在代理层返回。Nginx配置参考：

  location /myAPI {
      proxy_pass http://192.168.1.33:8090/myAPI;
      proxy_set_header Host $host;
      proxy_set_header Origin $http_origin;
      proxy_set_header X-Forwarded-Proto $scheme;
      # 放行OPTIONS请求到后端
      if ($request_method = OPTIONS) {
          proxy_pass http://192.168.1.33:8090;
          break;
      }
  }
  

  2. 确认反向代理没有过滤FastAPI返回的CORS响应头，需要允许Access-Control-*开头的头透传给客户端。
• 本地验证配置有效性
  在部署FastAPI的服务器上执行curl命令直接发预检请求，验证服务本身的CORS配置是否生效：
  curl -X OPTIONS -H "Origin: https://example2.com" -H "Access-Control-Request-Method: POST" http://192.168.1.33:8090/myAPI -i
  如果返回结果中包含Access-Control-Allow-Origin: https://example2.com，说明FastAPI配置正常，问题一定出在中间的代理/映射层。

内容的提问来源于stack exchange，提问作者dac.le