收到 CORS 错误而不是错误 500（不存在“Access-Control-Allow-Origin”标头）

Question

昨天，我问了一个有关 CORS 错误的问题，当我尝试从 Angular 应用程序向 FastApi 后端发出 POST 请求时，遇到了该错误。经过一些评论后，我决定删除该问题以更好地重新检查一切。

所以事情有点奇怪。在我的 FastApi 后端中，我有以下功能：

@app.post("/hello")
def read_root(request: Request):
    print(request)
    client_host = request.client.host
    return {"client_host": client_host}

@app.post("/pattern-data")
def pattern_input(payload: PatternReconData) -> Dict:
    # Does stuff and falls over tragically
    return result   # this doesn't happen of course

在我的前端我正在尝试这两个：

    this.apiService.sendRequest('hello', 'howdy').subscribe(
      (response) => {
        console.log(response);
      },
      (error: any) => {
        console.log(error);
      },
      () => {
        console.log('done');
      }
    );
    this.apiService.sendRequest('pattern-data', payload).subscribe(
      (response: SuccessResponse) => {
        console.log(response);
        /* do stuff */
      },
      (error: any) => {
        console.log(error);
      },
      () => {
        console.log('done');
      },
    );

奇怪的是，如果我测试向'pattern-data'Swagger UI 发送一些值，它会返回错误 500，因为脚本失败了。效果'hello'很好。

同样，如果我点击前端应用程序，.../hello我会得到预期的响应：

{client_host: '<some valid ip>'}

但是当尝试发送值时会.../pattern-data导致 CORS 错误：

Access to XMLHttpRequest at 'http://<my-backend-server>/pattern-data' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

但我知道后端已成功接收有效负载，因为如果我查看后端日志，我会看到以下内容：

2021-09-16 02:42:38.0130,main,DEBUG,Pattern name received from front-end {data}

因此，这表明飞行前检查成功，并且 Web 应用程序被允许与后端通信，因此这一切与 CORS 无关。

这有点令人困惑，让我在花时间研究 CORS 以及如何处理 CORS 错误后感到非常痛苦，而实际上我的问题与此无关。

我不明白为什么我没有收到错误 500，而是收到 CORS 错误。这是因为后端根本无法发送响应，并且浏览器 (Chrome) 将没有响应解释为没有必要的标头并显示 CORS 错误？

这是来自 Chrome 开发工具标题部分。戳/hello：

Request URL: http://<my-backend-server>/hello
Request Method: POST
Status Code: 200 OK
Remote Address: <some valid ip>
Referrer Policy: strict-origin-when-cross-origin
access-control-allow-credentials: true
access-control-allow-origin: http://localhost:4200
content-length: 31
content-type: application/json
date: Thu, 16 Sep 2021 02:43:09 GMT
server: uvicorn
vary: Origin

发送数据至/pattern-data：

Request URL: http://<my-backend-server>/pattern-data
Referrer Policy: strict-origin-when-cross-origin
content-length: 21
content-type: text/plain; charset=utf-8
date: Thu, 16 Sep 2021 02:43:09 GMT
server: uvicorn

Answer 1

发生错误时，响应中预期的 CORS 标头不存在（由于发生异常，中间件不会运行）。

由于缺少预期的 CORS 标头，浏览器除了返回 CORS 错误之外没有任何其他选项，即使底层错误是 500 错误。如果它确实返回更多信息，那么浏览器将泄漏不允许读取的信息（因为不存在 CORS 标头）。

CORS 仅保护您免受合规客户端（即适当的浏览器）的侵害，不允许第三方网站代表浏览器用户发出请求；它不会阻止任何其他人使用curl或类似的东西向您的服务发出随机请求（但他们无法访问可以在浏览器用户的上下文中发出请求的信息）。