從 Angular 調用的 FastAPI Post APIs - 相同的代碼：不同的行為

Question

我是 Angular 和 FastApi 的新手。 我一直在嘗試從 Angular 屏幕調用 2 個單獨的 FastApi 端點的場景。

• 我將相同的 Python 代碼用於 POST API 在 2 個單獨的 .py 文件中。 下面提供的代碼。
• 以上python服務運行在localhost，8000端口和8001端口
• 現在，我從我的 angular 應用程序（在 localhost:4200 上運行）調用這些后端點中的每一個。 下面提供的代碼。

Python 代碼

    from fastapi import FastAPI
    from pydantic import BaseModel
    from fastapi.middleware.cors import CORSMiddleware
    # from starlette.middleware.cors import CORSMiddleware
    # from starlette.middleware import Middleware
    class Item(BaseModel):
        name: str
        description: str | None= None
        price: float
        tax: float | None= None
    origins = [
        "*"
    ]
    app = FastAPI();
    app.add_middleware(
        CORSMiddleware,
        allow_origins = origins,
        allow_credentials = False,
        allow_methods = ["*"],
        allow_headers = ["*"]
    )
    @app.post("/items/")
    async def root(item: Item):
        return item

Angular 代碼

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)
          }
        )
        // const post = new Test("John");
        this.
        httpClient.
        post('http://127.0.0.1/8000/items',test).subscribe(
          (response) => {
            console.log(response)
          },
          (error) => {
            console.log(error)
          }
        )

現在，在端口 8001 上成功處理了 Fast Api 服務的請求，同時在端口 8000 上給出了拒絕連接到 Fast Api 服務的錯誤。試圖了解可能導致這種情況的原因。 錯誤消息似乎沒有提供太多信息。 謝謝。

Answer 1

在一種情況下，您調用的是127.0.0.1:8001 ，這是正確的；在第二種情況下，您調用的是127.0.0.1/8000 ，這是錯誤的。 替換: /

Answer 2

該問題可能是由於 Angular 代碼配置錯誤造成的，特別是在 HTTP 發布請求中。 第一個請求使用了正確的主機地址http://127.0.0.1:8001/items ，而第二個請求使用了錯誤的地址http://127.0.0.1/8000/items 。 （注意：“：”而不是“/”）

第二個請求的正確主機地址應該是http://127.0.0.1:8000/items 。

要解決該錯誤，請按如下方式更新第二個請求：

this.
httpClient.
post('http://127.0.0.1:8000/items', test).subscribe(
  (response) => {
    console.log(response)
  },
  (error) => {
    console.log(error)
  }
)