多网卡/动态IP设备下React调用本地API的Nginx适配方案咨询

你的问题其实是浏览器端应用的典型痛点——React运行在用户的浏览器里，没法直接知道当前设备的访问IP（尤其是多接口或者IP动态变化的场景），导致没法正确指向同一设备上的API服务。下面给你几个实用的解决方案，按推荐程度排序：

方案1：Nginx反向代理API请求（最推荐） #

这个方案彻底让React不用关心IP地址，所有API请求都通过相对路径发送，Nginx负责转发到本地API端口，同时还能解决跨域问题。

具体步骤： #

1. 修改React代码，把API请求路径改成相对路径。比如原本写死的http://192.168.x.x:8080/api/users，改成/api/users即可。
2. 在Nginx的80端口server配置中添加反向代理规则：

server {
    listen 80;
    server_name _; # 匹配所有访问的IP/域名

    # 托管React静态文件
    root /path/to/your/react/build;
    index index.html;

    # 把/api开头的请求转发到本地API服务器
    location /api {
        proxy_pass http://localhost:8080; # 替换成你的API端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 处理React路由刷新404的问题（如果用了React Router）
    location / {
        try_files $uri $uri/ /index.html;
    }
}

这样不管用户通过哪个IP访问React应用，/api开头的请求都会被Nginx转发到本地的API服务器，完全规避了IP问题，而且因为请求的是同一端口，浏览器不会触发跨域限制。

方案2：React自动推导当前访问的IP #

利用浏览器自带的window.location对象，动态获取当前页面的访问IP，拼接成API地址。

具体步骤： #

在React的API封装文件里，动态生成API基础地址：

// src/utils/api.js
const protocol = window.location.protocol; // 比如http:或https:
const hostname = window.location.hostname; // 当前访问的IP或域名
const apiPort = 8080; // 你的API服务器端口

export const API_BASE_URL = `${protocol}//${hostname}:${apiPort}`;

// 示例请求
export async function fetchUsers() {
    const res = await fetch(`${API_BASE_URL}/api/users`);
    return res.json();
}

这个方案不用改Nginx配置，但要注意跨域问题——浏览器会从80端口请求8080端口，属于跨域，需要在API服务器上配置CORS允许跨域请求。比如用Express的话：

const cors = require('cors');
app.use(cors({ origin: true })); // 允许所有来源的请求

如果是本地网络使用，这个方案足够简单直接。

方案3：Nginx动态注入API地址到HTML #

让Nginx根据用户访问的IP，动态修改React的index.html，注入全局的API地址变量，React加载时直接读取这个变量即可。

具体步骤： #

1. 在React的public/index.html里添加一个全局变量占位符：

<script>
    window.API_CONFIG = {
        baseUrl: '{{API_BASE_URL}}'
    };
</script>

2. 修改Nginx配置，用sub_filter替换占位符为当前访问的IP：

server {
    listen 80;
    server_name _;

    root /path/to/your/react/build;
    index index.html;

    # 替换HTML里的占位符为当前服务器IP+API端口
    sub_filter '{{API_BASE_URL}}' "http://$server_addr:8080";
    sub_filter_once off; # 确保所有占位符都被替换

    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 在React代码中读取这个全局变量：

// src/utils/api.js
export const API_BASE_URL = window.API_CONFIG.baseUrl;

这个方案让React完全不用处理IP逻辑，但需要确保你的Nginx编译时包含了sub_filter模块（大部分默认安装的Nginx都支持）。

方案对比 #

根据你的本地网络场景，**方案1（反向代理）**是最优选择，既解决了IP问题，又避免了跨域，维护成本也最低。

内容的提问来源于stack exchange，提问作者fa__