如何从同一本地网络上的不同机器/IP 访问 FastAPI 后端？-api-IT问答社区-解决你的IT疑问

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

Eduardo Leoni 2月前

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=["*"],
)

帖子版权声明 1、本帖标题：如何从同一本地网络上的不同机器/IP 访问 FastAPI 后端？
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Eduardo Leoni在本站《api》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

dj423 2月前 0 只看Ta

引用 2楼
这个问题困扰了我好几天 - 我在 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，并且可以从网络上的任何机器访问该页面。

希望这对某人有帮助！
Frank Mehlhop 2月前 0 只看Ta

引用 3楼

对于 Expo，您可以执行如下操作来获取主机的 IP：const debuggerHost = Constants.expoConfig?.hostUri;
ruper 2月前 0 只看Ta

引用 4楼

@HenryThornton 您可以在这里、这里和这里找到客户端-服务器工作示例
Amy.Trigg 2月前 0 只看Ta

引用 5楼
设置 host 为 0.0.0.0

要从同一网络上的其他计算机/IP（而不是运行服务器）访问 FastAPI 后端，您需要确保将标志 host 设置为 0.0.0.0 。 IP 地址 0.0.0.0 表示 本地计算机上的 所有 host 有两个 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 prohibits 0.0.0.0 as a destination address in IPv4 ，而仅允许将其作为源地址，这意味着您不能 http://0.0.0.0:8000 在浏览器的地址栏中键入地址并期望它能正常工作。您应该改用本地计算机的 IPv4 地址之一，例如 http://192.168.10.2:8000 （或者，如果您在运行服务器的同一台本地计算机上测试 API，则可以使用 http://127.0.0.1:8000 or http://localhost:8000 ）。

调整防火墙设置

您可能还需要调整 防火墙 以允许外部访问 port 您指定的网络，方法是为 Python 创建入站防火墙规则。在 Windows 上，当允许程序（在本例中为 Python）通过 Windows 防火墙进行通信时，通常会自动创建此规则，默认情况下，这将允许 Any 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 与在浏览器地址栏中输入的域名相同的 port 使用后端服务器正在监听的号码）。例如，如果后端和前端服务器都在监听相同的 IP 地址和端口号，例如 — 192.168.178.23:8000 时就是这种情况 Jinja2Templates — 您可以通过在浏览器的地址栏中输入指向前端页面的 URL 来访问前端，例如 http://192.168.178.23:8000/ ，请求 fetch 应如下所示：
```
fetch('http://192.168.178.23:8000/people', {...
```
为方便起见，在上述情况下（即后端和前端都在同一台计算机上运行并在同一台计算机上监听 p或t ），您可以使用相对路径，如上面链接的答案中建议的那样。 请注意 ，如果您在同一台计算机上本地测试应用程序，而不是在 LAN 上的另一台计算机上测试应用程序，而是使用 127.0.0.1 or localhost 访问前端/后端，则这两个是 不同的 域/来源。因此，如果您在浏览器的地址栏中输入 http://127.0.0.1:8000/ 以访问前端页面，则不应 fetch 使用例如发出请求 fetch('http://localhost:8000/people' ，因为您会收到 CORS 错误（例如 Access to fetch at [...] from origin [...] has been blocked by CORS policy... ）。您应该使用 fetch('http://127.0.0.1:8000/people' ，反之亦然。

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

引用 6楼

确实，这就是问题所在：即使我从 192.168.xx 连接，前端也只能看到“localhost”……
Chana T 2月前 0 只看Ta

引用 7楼

不幸的是，我无法在另一台机器上打开控制台。我也用手机试过了，也报错。确实我需要打印错误，而不是这里显示的错误。
Fleacon 2月前 0 只看Ta

引用 8楼

我更新了文本以反映 process.env 内容。CORS 应该不是问题，因为我按照 FastAPI 文档的建议进行了配置。我也会考虑您引用的链接。