angular - 获取 CORS 错误而不是错误 500(不存在 'Access-Control-Allow-Origin' header )

Question

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

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

奇怪的是，如果我在 Swagger UI 中测试向 'pattern-data' 发送一些值，由于脚本失败，它会返回错误 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}

所以这表明飞行前检查成功，网络应用程序被允许与后端通信，所以这一切都与 CORS 无关。

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

我不明白为什么我没有收到错误 500 而是 CORS 错误。这是因为后端根本无法发送响应并且浏览器 (Chrome) 将无响应解释为没有必要的 header 并显示 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 header 不存在(由于发生异常，中间件不会运行)。

由于缺少预期的 CORS header ，浏览器除了返回 CORS 错误外别无选择，即使基础错误是 500 错误。如果它确实返回了更多信息，那么浏览器将泄漏不允许读取的信息(因为不存在 CORS header )。

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