React配置package.json代理不生效，无需手动写后端URL该如何解决？

根因定位 #

首先从报错信息GET http://localhost:3000/api/customers/undefined 404 (Not Found)可以发现核心问题是你定义的CustomersService类存在方法重载冲突：

• JS原生不支持类方法重载，你定义了两个同名的getCustomers方法，带pk参数的方法会覆盖无参方法，当你调用无参的getCustomers()时，pk参数为undefined，最终拼接出的请求路径是/api/customers/undefined，你误以为是代理没生效，实际是路径拼接错误导致的问题。

修复步骤 #

1. 修正Service类的方法命名 #

把带pk参数的查询方法改名，避免覆盖无参方法，修正后的代码如下：

import axios from "axios";

export default class CustomersService{
    // 查询全部客户
    getCustomers() {
        return axios.get("/api/customers").then(response => response.data);
    }
    getCustomersByURL(link){
        return axios.get(`/api/customers/${link}`).then(response => response.data);
    }
    // 查询单个客户，修改方法名避免重载
    getCustomerByPk(pk) {
        return axios.get(`/api/customers/${pk}`).then(response => response.data);
    }
    deleteCustomer(customer){
        return axios.delete(`/api/customers/${customer.pk}`);
    }
    createCustomer(customer){
        return axios.post("/api/customers",customer);
    }
    updateCustomer(customer){
        return axios.put(`/api/customers/${customer.pk}`);
    }
}

2. 对应修改组件内的调用逻辑 #

• 列表页CustomersList调用无参的getCustomers()获取全部客户数据
• 编辑页CustomerCreateUpdate先读取路由参数中的pk值，如果pk存在调用getCustomerByPk(pk)获取单条客户数据，不存在则为新增场景，不需要调用查询接口。

3. 代理不生效的兜底排查 #

如果修正后还是出现请求到3000端口的问题，按以下项检查：

• 每次修改package.json的proxy配置后，必须重启本地开发服务，新的代理配置才会生效
• 确认你没有给axios设置全局baseURL为3000端口地址，如果有相关配置直接删除即可
• Create React App的原生proxy仅在开发环境生效，生产环境打包后需要通过Nginx等反向代理工具配置转发规则。

4. 更通用的多环境配置方案 #

如果不想依赖proxy能力，同时兼顾开发、生产环境的地址切换，可以用环境变量配置后端地址，不需要在代码里硬写域名：

1. 项目根目录新建.env.development（开发环境）和.env.production（生产环境）两个文件：
   .env.development内容：

REACT_APP_BACKEND_URL = http://localhost:8000

.env.production内容：

REACT_APP_BACKEND_URL = 你的线上后端服务地址

2. 新建统一的axios实例配置文件src/utils/request.js：

import axios from 'axios'

const request = axios.create({
  baseURL: process.env.REACT_APP_BACKEND_URL
})

export default request

3. 所有Service类导入这个封装好的request实例发起请求即可，打包时会自动根据环境替换后端地址。

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