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=["*"],
)
这个问题困扰了我好几天 - 我在 Mac 上使用 fastapi/uvicorn,使用 Python 3.9。
当将 uvicorn 主机设置为 0.0.0.0 时,启动后我检查发现它只绑定到 TCP 127.0.0.1:
sudo lsof -PiTCP -sTCP:LISTEN
所以我深入研究了 uvicorn 代码,解决方案在这个文件中:/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/uvicorn/config.py
只需将此:sock.bind((self.host, self.port))更改为此:sock.bind(('0.0.0.0', self.port))
经过此更改后,我重新启动了 uvicorn,并且可以从网络上的任何机器访问该页面。
希望这对某人有帮助!