为啥我会收到 CORS 错误原因：CORS 请求未成功

Posted 2023-03-04

【中文标题】为啥我会收到 CORS 错误原因：CORS 请求未成功

【英文标题】：Why do I get CORS Error Reason: CORS request did not succeed为什么我会收到 CORS 错误原因：CORS 请求未成功

【发布时间】：2020-12-15 18:01:28

【问题描述】：

我正在开发一个精简的应用程序，它使用 FastAPI 后端与我的组织本地的 PostgreSQL 数据库进行交互，而不是在我的 AWS EC2 实例上。

我使用 javascript 的 fetch api 向我的后端发送请求以查询数据库中的各种内容，在我的本地计算机上，所有这些请求都在两端接收，在 AWS 上，但是来自我的前端的请求甚至不被识别fastAPI 后端。

我对设置这样的服务器相当缺乏经验，所以我认为我在设置这些服务器时存在一些基本错误，导致它们之间无法在 AWS 上进行这样的通信。

fastapi 代码如下所示：

import uvicorn
from fastapi import (Depends, FastAPI, HTTPException, Query,
                     Request)
from fastapi.middleware.cors import CORSMiddleware


app = FastAPI(debug=True)

origins = [
    '*'
]

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


@app.get("/")
async def root():
    return "message": "Hello World"

if __name__ == '__main__':
    uvicorn.run(app, host="0.0.0.0", port=8000)

我的获取请求通常如下所示：

const endpoint = public_IP:8000 + `/`;

let objs = [];

fetch(endpoint)
    .then(response => 
        if (!response.ok) 
            throw Error(response.statusText);
        
        return response.json();
    )

当我发送一个像上面这样的获取请求时，我收到一个 CORS 错误，原因是：CORS 请求没有成功。 FastAPI 服务器没有反馈，请求似乎永远不会到达它，我不确定为什么。据我所知，这通常与 HTTP 和 HTTPS 请求之间的问题有关，但这些似乎与我的问题无关，因为我的设置中没有任何部分不使用 HTTP。使用 chrome 时出现错误：加载资源失败：net::ERR_CONNECTION_REFUSED 也是。

我的 EC2 实例的 AWS 安全组允许从任何 IP 到端口 5000 和 8000 的 TCP 流量。这是我的两个应用程序分别托管的位置，Svelte 和 FastAPI。

【参考方案1】：

总结

CORS 错误有时会令人困惑，因为错误消息不够清晰，并且有很多可能的解决方案。

第一种可能性

如果您从给定主机（在您的情况下为 0.0.0.0）加载页面，然后尝试向另一个主机（例如 127.0.0.1）发出请求，该请求将被阻止以防止 XSS 攻击

将您的主机从 0.0.0.0 更改为 127.0.0.1 应该可以解决此问题。

第二种可能性

如果您是 Mozilla 人，Mozilla 中存在错误[see, see]，但如果是这种情况，您的代码应该可以在其他浏览器中运行

解决方案：您必须在每个端口上单独启用证书。

其他可能性

尝试更改您的端点

const endpoint = public_IP:8000 + `/`;

到这里

const endpoint = `/`;

【参考方案2】：

您的 fastapi 应用程序中的端点很可能引发了异常。出现这种情况时，通过app.add_middleware(...) 安装的CORSMiddleware 看不到任何HTTP 响应，并且没有机会对FastAPI 错误处理程序产生的HTTP 响应执行其工作。

解决方案是使用 CORSMiddleware 包装整个 FastAPI 应用程序，如下所示：

import uvicorn
from fastapi import (Depends, FastAPI, HTTPException, Request
from fastapi.middleware.cors import CORSMiddleware


app = FastAPI(debug=True)

origins = [
    '*'
]


@app.get("/")
async def root():
    return "message": "Hello World"


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

if __name__ == '__main__':
    uvicorn.run(app, host="0.0.0.0", port=8000)