Angular调用FastAPI POST接口：相同代码却表现不同

问题核心原因 #

你遇到的8000端口请求连接拒绝错误，本质是请求URL的格式错误：在Angular代码中，8000端口的URL被错误地写成了http://127.0.0.1/8000/items——这里把端口号的分隔符:写成了/，导致请求实际指向的是HTTP默认的80端口下的/8000/items路径，而非你运行在8000端口的FastAPI服务。

修正后的Angular代码 #

将错误的URL替换为正确格式http://127.0.0.1:8000/items即可：

onClickTest(){
        const test = new Post("John","Desc",1,2);
        console.log("Clicked...");
        this.httpClient.post('http://127.0.0.1:8001/items',test).subscribe(
          (response) => {
            console.log(response)
          },
          (error) => {
            console.log(error)
          }
        )
        // 修正8000端口的URL格式
        this.httpClient.post('http://127.0.0.1:8000/items',test).subscribe(
          (response) => {
            console.log(response)
          },
          (error) => {
            console.log(error)
          }
        )
}

额外验证步骤 #

如果修正后仍有问题，可以按以下步骤排查：

• 直接在浏览器访问http://127.0.0.1:8000/docs，若能看到FastAPI的自动文档页面，说明服务正常；
• 用curl命令测试接口：

curl -X POST "http://127.0.0.1:8000/items" -H "Content-Type: application/json" -d '{"name":"test","price":1.0}'

内容的提问来源于stack exchange，提问作者Van