React+Vite应用无域名时，如何用IP替代localhost发起请求？

我开发了一个基于React+Vite的应用，其中包含一些fetch请求，示例代码如下：

const fetchRows = async () => {
  let rows = [];
  const response = await axios.post(
    'http://localhost:81/api/get_rows',
    {}
  );
  rows.push(response.data['rows']);
  return rows;
};

这段代码的具体功能无关紧要，关键在于请求中使用的主机名——此处POST请求指向localhost:81。

在开发环境中，后端Web服务器、NodeJS/React/Vite开发环境/服务器以及测试用浏览器都在同一台机器上，因此该代码运行正常。但将应用和后端逻辑部署到云服务器后，从其他机器访问时，该代码就无法正常工作了，这一点在意料之中。

我尚未为该系统配置域名，虽然必要时可以注册，但作为演示项目，我更希望用IP地址替代localhost，而非购买并配置域名（我知道域名不贵，只是不想为此配置）。

请问是否有相对简便的方法，无需硬编码IP地址（显然这不是好方案），就能让React代码用IP替代localhost发起请求？例如：是否存在React或JavaScript函数可以获取主机的IP地址？不过这可能并不容易，因为一台机器有多个IP地址（比如所有Linux主机都有的127.0.0.1）。欢迎任何建议，如果购买域名更简单，我也会选择该方案。

1. Vite环境变量+代理配置（开发/部署通用） #

开发阶段 #

在vite.config.js中配置代理，让前端请求自动转发到后端服务，代码里只用写相对路径：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:81',
        changeOrigin: true
      }
    }
  }
})

修改请求代码：

const response = await axios.post('/api/get_rows', {});

部署阶段 #

在云服务器上设置环境变量（以Linux为例）：

export VITE_API_BASE_URL=http://你的云服务器IP:81

前端代码中读取该变量：

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || '/api';
const response = await axios.post(`${apiBaseUrl}/get_rows`, {});

部署时只需修改环境变量，无需改动代码，也避免硬编码IP。

2. 利用当前页面Origin自动适配 #

如果前后端部署在同一台云服务器（仅端口不同），可以直接获取当前页面的window.location.origin，拼接后端端口：

// 替换当前页面端口为后端的81
const backendOrigin = window.location.origin.replace(/:\d+$/, '') + ':81';
const response = await axios.post(`${backendOrigin}/api/get_rows`, {});

这种方法无需额外配置，前端会自动使用用户访问时的IP来拼接后端地址。

3. 注册免费域名（可选） #

若觉得上述方法仍有不便，可以选择免费二级域名（部分平台提供），将其绑定到云服务器IP后，前端代码直接使用该域名。虽然需要少量配置，但后续访问更直观，也能避免IP变动带来的麻烦。

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