获取 CORS 错误而不是错误 500（不存在 'Access-Control-Allow-Origin' header）

Question

昨天我问了一个关于 CORS 错误的问题，我在尝试从 Angular 应用程序向 FastApi 后端发出 POST 请求时遇到了这个错误。经过一些评论后，我决定删除 re-check 一切都更好的问题。

所以事情有点奇怪。在我的 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

在我的 front-end 中，我正在尝试这两种方法：

    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');
      },
    );

奇怪的是，如果我在 Swagger UI 中测试向 'pattern-data' 发送一些值，由于脚本失败，它会返回错误 500。 'hello' 工作正常。

类似地，如果我点击 .../hello 从 front-end 应用程序开始，我会得到预期的响应：

{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}

所以这表明 pre-flight 检查成功并且 Web 应用程序被允许与后端通信，所以这一切都与 CORS 无关。

这有点令人困惑，让我很伤心，因为我花了很多时间研究 CORS 以及如何处理 CORS 错误，而实际上我的问题与它无关。

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

这来自 Chrome 开发工具 Headers 部分。戳/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 header 不存在（因为发生异常，中间件不运行 ).

由于缺少预期的 CORS headers，浏览器除了 returning CORS 错误外别无选择，即使潜在错误是 500 错误。如果它提供 return 更多信息，那么浏览器将泄漏不允许读取的信息（因为不存在 CORS header）。

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

获取 CORS 错误而不是错误 500（不存在 'Access-Control-Allow-Origin' header）

Getting CORS error instead of Error 500 (No 'Access-Control-Allow-Origin' header is present)

backend

cors

angular

fastapi