昨天我问了一个关于我在尝试从 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
最佳答案
发生错误时,响应中预期的 CORS header 不存在(由于发生异常,中间件不会运行)。
由于缺少预期的 CORS header ,浏览器除了返回 CORS 错误外别无选择,即使基础错误是 500 错误。如果它确实返回了更多信息,那么浏览器将泄漏不允许读取的信息(因为不存在 CORS header )。
CORS 仅保护您免受合规客户端(即适当的浏览器)的侵害,不允许第三方站点代表浏览器用户发出请求;它不会阻止任何其他人使用 curl 或类似的东西对您的服务发出随机请求(但他们无法访问可以在浏览器用户的上下文中发出请求的信息)。
关于angular - 获取 CORS 错误而不是错误 500(不存在 'Access-Control-Allow-Origin' header ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69201995/