FastAPI配置CORS后仍无法解决React请求跨域问题

核心问题分析 #

从错误信息能明确：你的请求从https://api.myapi.io/phones?detailed=true&brand=LG被重定向到了http://api.myapi.io/phones/?detailed=true&brand=LG，重定向后的HTTP响应没有携带Access-Control-Allow-Origin头。而不带参数的https://api.myapi.com/phones请求未触发重定向，直接由FastAPI处理并返回了正确的CORS头，因此不会报错。

具体解决步骤 #

1. 修正请求URL，避免触发重定向 #

直接使用重定向后的正确路径（在phones后添加斜杠），修改React中的请求代码：

useEffect(() => {
    async function getPhones(){
        try{
            const response = await fetch(
                `https://api.myapi.com/phones/?detailed=true&brand=${brand}`
            );
            const json = await response.json();
            setPhones(json)
        } catch(error){
            console.error('Error fetching phones:', error);
        }
    }
    getPhones();
}, [])

2. 统一FastAPI路由格式 #

检查你的FastAPI路由定义，确保路由路径和请求URL一致：

• 如果路由定义为/phones/（带斜杠）：

  @app.get("/phones/")
  async def get_phones(detailed: bool = False, brand: str = None):
      # 业务处理逻辑
      pass
  

  此时访问/phones（不带斜杠）会触发FastAPI的自动重定向，统一使用带斜杠的路径即可避免该问题。
• 若想关闭自动重定向，可在创建应用时设置redirect_slashes=False：

  from fastapi import FastAPI
  
  app = FastAPI(redirect_slashes=False)
  

3. 确保重定向保持HTTPS协议 #

错误中重定向到HTTP协议既不安全，也会引发额外CORS问题。检查服务器反向代理配置（如Nginx、Apache），确保所有HTTP请求都重定向到HTTPS，同时确认FastAPI的root_path或代理配置正确，避免内部重定向到HTTP。

4. 验证CORS中间件优先级 #

确保CORSMiddleware是第一个添加的中间件，防止被其他中间件覆盖响应头：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 优先添加CORS中间件
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"]
)

# 后续添加路由及其他中间件
@app.get("/phones/")
async def get_phones(detailed: bool = False, brand: str = None):
    # 业务处理逻辑
    pass

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