React/Express应用部署：如何将localhost绝对路径改为相对路径

下面给你几种实用的解决办法，适配开发和部署场景：

方法一：利用Create React App的内置代理 #

如果你的React项目是用Create React App创建的，直接在项目根目录的package.json里添加proxy字段：

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:3001",
  // 其他配置...
}

重启React服务后，axios请求就能用相对路径：

async function getUser(){
    let res = await axios.get("/users/testuser")
    console.log(res.data)
}

这个配置在开发环境会自动把前端请求转发到后端地址；部署时如果前后端同域名，直接去掉proxy或调整路径即可。

方法二：配置axios全局实例+环境变量 #

这种方式更灵活，能自动适配开发/生产环境：

1. 在React项目根目录创建两个环境变量文件：

• .env.development（开发环境）：

REACT_APP_API_BASE_URL=http://localhost:3001

• .env.production（生产环境）：

REACT_APP_API_BASE_URL=/api

（生产环境如果前后端同域名就用相对路径/api，独立域名则填完整地址）

2. 创建axios配置文件（比如src/utils/axios.js）：

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
});

export default api;

3. 在组件里导入实例使用：

import api from '../utils/axios';

// ...

async function getUser(){
    let res = await api.get("/users/testuser")
    console.log(res.data)
}

这样不同环境会自动读取对应的baseURL，不用手动修改请求地址。

方法三：生产环境用反向代理（比如Nginx） #

如果部署时前后端分开部署，用Nginx做反向代理，配置示例：

server {
    listen 80;
    server_name your-domain.com;

    # 前端静态文件
    location / {
        root /path/to/react/build;
        try_files $uri $uri/ /index.html;
    }

    # 转发后端接口
    location /api {
        proxy_pass http://localhost:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

此时React里的请求用相对路径/api/users/testuser，Nginx会自动转发到后端的http://localhost:3001/users/testuser（如果后端接口没有/api前缀，可调整Nginx的rewrite规则适配）。

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