FastAPI 后端跨机器访问问题终极指南：3 种解决方案详解

2024-11-08 14:38:41

FastAPI 后端跨机器访问问题解决指南

在同一局域网内，从不同的机器访问 FastAPI 后端服务是开发过程中常见的需求。有时，尽管前端和后端在同一台机器上运行良好，但从其他机器访问时却会出现问题。本文将分析这类问题的常见原因，并提供几种解决方案。

问题通常表现为：前端应用运行正常，但无法获取后端 API 数据，或出现网络错误。Swagger 文档在所有机器上都能正常访问，进一步表明问题出在前端应用对后端 API 的访问方式上。

问题分析

问题根源在于前端代码中的 API 地址配置。当前端在与后端相同的机器上运行时，localhost 指向本机。然而，当从其他机器访问时，localhost 指向的是访问者的机器，而不是运行 FastAPI 后端的机器。因此，前端应用无法正确连接到后端服务。

解决方案

以下提供三种解决方案，并分别解释其原理和操作步骤。

1. 使用后端机器的 IP 地址

最直接的解决方案是将前端代码中的 API 地址替换为后端机器的局域网 IP 地址。

操作步骤:

获取 FastAPI 后端所在机器的局域网 IP 地址。可以通过 ipconfig (Windows) 或 ifconfig (Linux/macOS) 命令查看。假设 IP 地址为 192.168.1.100。
修改前端环境变量 .env.local 文件中的 NEXT_PUBLIC_API 的值:
```
NEXT_PUBLIC_API=http://192.168.1.100:20002
```
重新启动前端开发服务器。

原理: 使用 IP 地址可以直接定位到局域网内的特定机器，从而使前端应用能够正确访问后端 API。

2. 使用机器名

如果在局域网内配置了 DNS 服务器或使用了 mDNS，可以使用后端机器的机器名来访问。

操作步骤:

确定后端机器的机器名，例如 backend-server。
修改前端环境变量 .env.local 文件中的 NEXT_PUBLIC_API 的值:
```
NEXT_PUBLIC_API=http://backend-server:20002
```
重新启动前端开发服务器。

原理: 机器名通过 DNS 或 mDNS 解析为对应的 IP 地址，使前端应用能够找到后端服务。

3. 配置 CORS 白名单 (需谨慎)

CORS (Cross-Origin Resource Sharing) 策略控制着浏览器是否允许跨域请求。虽然修改 CORS 配置可以解决跨域问题，但在局域网开发环境中，直接使用 IP 地址或机器名通常是更合适的方案。不推荐将 * 作为 allow_origins 的值，因为它存在安全风险。

如果你坚持使用 CORS，请务必将前端应用访问的地址精确地添加到允许的来源列表中：

操作步骤:

获取所有需要访问后端 API 的机器的 IP 地址和端口，例如 http://192.168.1.101:3000, http://192.168.1.102:3000。
修改 FastAPI 后端的 CORS 中间件配置:

origins = [
    "http://localhost:3000",
    "http://192.168.1.101:3000",
    "http://192.168.1.102:3000",
    "http://backend-server:3000", # 如果使用机器名
]