FastAPI 后端和 Next.js 前端都在 localost 上运行。在同一台计算机上，前端使用 fetch 进行 API 调用没有任何问题。然而，在另一台计算机上...

FastAPI 后端和 Next.js 前端都在 上运行 localost 。在同一台计算机上，前端使用 进行 API 调用 fetch 同一 上的另一台计算机 （例如 ）上 192.168.x.x ，前端可以运行，但其 API 调用不再起作用。

我曾尝试使用代理作为 next.js，但仍然不起作用。

前端：

export default function People({setPerson}:PeopleProps)  {
 const fetcher = async (url:string) => await axios.get(url).then((res) => res.data);
 const { data, error, isLoading } = useSWR(`${process.env.NEXT_PUBLIC_API}/people`, fetcher);
  if (error) return <div>"Failed to load..."</div>;
  return (
      <>
        {isLoading? "Loading..." :data.map((person: Person) =>
        <div key={person.id}> {person.name} </div>)}
     </> 
  )
 }

Next.js 应用 env.local 在启动时加载该文件，其中包含： NEXT_PUBLIC_API=http://locahost:20002

后端：

rom typing import List
from fastapi import APIRouter, Depends
from ..utils.db import get_session as db
from sqlmodel import Session, select
from ..schemas.person import Person, PersonRead
router = APIRouter()

@router.get("/people", response_model = List[PersonRead])
async def get_people(sess: Session = Depends(db)):
    res = sess.exec(select(Person)).all()
    return res 

前端运行： npm run dev ，并输出

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

后端运行： uvicorn hogar_api.main:app --port=20002 --host=0.0.0.0 --reload ，并输出：

INFO:     Uvicorn running on http://0.0.0.0:20002 (Press CTRL+C to quit)

同一台机器上 http://localhost:3000 打开浏览器时， 列表 Person 就会显示在屏幕上。

在同一网络上的另一台机器上 http://192.168.x.x:3000 on another machine on the same network ，出现“无法加载...”消息。

当我在任一机器上打开 FastAPI swagger 文档时，文档都正确显示，并且所有端点都按预期工作。

CORS 如下所示：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost:3000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)