后端返回两次“Access-Control-Allow-Origin”Header，每次都有不同的值

Question

我正在使用 Python 的 FastAPI 在我的前端管理服务器的 API 和 Axios 挂钩。

这是我的代码片段，用于处理服务器上 CORS 策略的详细信息：

origins = ["http://localhost:3000"]

 *****some code here*****

app = FastAPI(
        title=settings.PROJECT_NAME,
        version="1.0",
        docs_url=f"{settings.API_V1_STR}/docs",
        openapi_url=f"{settings.API_V1_STR}/openapi.json",
    )

app.container = app

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

app.include_router(api_router, prefix=settings.API_V1_STR)

这是我通过 Axios-hooks axios-hooks 文档在前端使用的相关钩子：

const [
    {
        response: marketResponse,
        loading: marketLoading,
        error: marketError,
    },
] = useAxios({
    url: serverURL("market/list"),
    method: "GET",
});

重要的是要注意我已经仔细检查了允许的来源。

问题：

由于我的 web 应用程序通过上述 axios 钩子请求列表，出现以下错误：

前端 HTTP 错误

这是网络选项卡的 Header 信息：

网络的 Header 信息

正如您会注意到的那样，Access-Control-Allow-Origin 出现了 2 次。 一次是大写的初始字母，第二次是全部小写。 我认为这个问题不知何故源于这个标题。 不幸的是找不到修复它的特定方法。

感谢您提供任何帮助！

用谷歌搜索了多个类似的问题并研究了 Axios 和 Fast Api 文档。 不幸的是，连一点点解决办法都找不到。

Answer 1

问题

这实际上是Starlette CORSMiddleware的一个已知问题。 所以问题是 Starlette CORSMiddleware 添加了原点 header 而没有检查它是否已经存在。 这是设计使然。

FastAPI 正在包装这个模块。

如果您查看实际的 Starlette 代码，您会发现它位于这一行。

这解释了Access-Control-Allow-Origin的大写版本。

那么为什么会这样呢？

多个服务器正在运行。 一个已知问题是，如果您使用的是python-socketio ，则 socketio 将添加自己的 header 版本。

我注意到这一行：

app.container = app

这是什么原因？ 您可以尝试将其注释掉并重新运行代码吗？

否则检查您的 NGINX 是否设置为 CORS。