如何从同一本地网络上的不同机器/IP 访问 FastAPI 后端？-IT科技

摘要：问题描述：FastAPI 后端和 Next.js 前端都在上运行localost。在同一台计算机上，前端使用进行 API 调用没有任何问题。但是，在同一fetch网络上的另一台计算机（例如）上，前端可以运行，但其 API 调用不再起作用。192.168.x.x我曾尝试使用代理作为 next.js，但仍然...

问题描述：

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

我曾尝试使用代理作为 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 上的另一台机器上打开浏览器时，收到“无法加载...”消息。

当我在任一机器上打开 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=["*"],
)

解决方案 1：

将`host`标志设置为`0.0.0.0`

要从同一网络上的不同机器/IP（而不是运行服务器的本地机器）访问 FastAPI 后端，您需要确保将host标志设置为0.0.0.0。IP 地址0.0.0.0表示本地机器上的所有hostIPv4 地址。如果有两个 IP 地址，例如192.168.10.2和10.1.2.5，并且上运行的服务器host在上侦听0.0.0.0，则可以通过这两个 IP 访问它。例如，通过命令行界面：

uvicorn main:app --host 0.0.0.0 --port 8000

或者，以编程方式：

if __name__ == '__main__':
    uvicorn.run(app, host='0.0.0.0', port=8000)

请注意，RFC 1122 禁止0.0.0.0将其用作 IPv4 中的目标地址，而仅允许将其用作源地址，这意味着您不能http://0.0.0.0:8000在 Web 浏览器的地址栏中键入地址并期望它能正常工作。您应该改用本地计算机的 IPv4 地址之一，例如http://192.168.10.2:8000（或者，如果您在运行服务器的同一台本地计算机上测试 API，则可以使用http://127.0.0.1:8000或http://localhost:8000）。

调整防火墙设置

您可能还需要调整防火墙以允许外部访问您指定的网络port，方法是为 Python 创建入站防火墙规则。在 Windows 上，当允许程序（在本例中为 Python）通过 Windows 防火墙进行通信时，通常会自动创建此规则，默认情况下，这将允许任何 port网络上的流量（对于 TCP 和 UDP 连接）。

调整 CORS 设置

此外，如果您的前端正在监听来自后端的单独IP 地址和/或端口号，请确保已启用CORS并正确配置，如此答案和此答案中所述。例如：

origins = ['http://localhost:3000','http://192.168.178.23:3000']

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

使用 JavaScript 发出 HTTP 请求

最后，请查看此答案和此答案fetch，了解如何在从前端发出 JavaScript 请求时使用正确的来源/URL 。简而言之，在您的 JavaScript 异步请求中，您应该使用您在 Web 浏览器地址栏中输入的相同port域名（但使用后端服务器正在监听的号码）。例如，如果后端和前端服务器都在监听相同的 IP 地址和端口号，例如 — 例如192.168.178.23:8000使用时就是这种情况Jinja2Templates— 您可以通过在浏览器的地址栏中输入指向前端页面的 URL 来访问前端，例如http://192.168.178.23:8000/，fetch请求应如下所示：

fetch('http://192.168.178.23:8000/people', {...

为方便起见，在上述情况下（即，当后端和前端都在同一台计算机上运行并在同一台计算机上监听时port），您可以使用相对路径，如上面链接的答案中所建议的那样。请注意，如果您在同一台计算机上本地测试应用程序，而不是在 LAN 上的另一台计算机上测试应用程序，而是使用或访问前端/后端，则这两个是不同的域/来源。因此，如果您在浏览器的地址栏中输入以访问前端页面，则不应使用例如发出请求，因为您会收到 CORS 错误（例如）。您应该使用，反之亦然。127.0.0.1`localhosthttp://127.0.0.1:8000/fetchfetch('http://localhost:8000/people'Access to fetch at [...] from origin [...] has been blocked by CORS policy...`fetch('http://127.0.0.1:8000/people'

否则，如果前端与后端origin 不同（有关更多详细信息，请参阅此答案origin），则应将其添加到后端 CORS 设置中的来源列表中（请参阅上面的示例）。