如何将React应用的基础URL从localhost改为自定义域名

问题原因 #

你在package.json里配置的proxy字段仅在开发环境（yarn start）生效，它是给webpack-dev-server用的请求转发规则，打包后的生产环境不会读取这个配置。所以部署后，API请求会默认指向当前页面的域名（也就是你部署React应用的Nginx服务器地址），而非预期的后端API地址。

解决方案 #

方法1：使用环境变量（推荐）

Create React App支持通过环境变量区分开发/生产环境的配置，步骤如下：

1. 在项目根目录创建两个环境配置文件：
   • .env.development（开发环境用）：

     REACT_APP_API_BASE_URL=''
     

     开发时依赖proxy转发，留空即可让请求走相对路径，被自动转发到https://api.mysite.com。
   • .env.production（生产环境用）：

     REACT_APP_API_BASE_URL='https://api.mysite.com'
     

2. 封装API请求实例（以axios为例）：
   在src/utils/axios.js创建如下文件：

   import axios from 'axios';
   
   const apiInstance = axios.create({
     baseURL: process.env.REACT_APP_API_BASE_URL,
   });
   
   export default apiInstance;
   

3. 替换所有API请求：
   把原来直接用axios发请求的代码，换成上面的实例，比如登录请求：

   import api from '../utils/axios';
   
   api.post('/v1/auth/login', loginData);
   

方法2：直接在代码中判断环境

如果不想用环境变量，也可以直接通过process.env.NODE_ENV判断环境并设置baseURL：

import axios from 'axios';

const baseURL = process.env.NODE_ENV === 'production' 
  ? 'https://api.mysite.com' 
  : '';

const api = axios.create({ baseURL });

export default api;

之后同样用这个实例发起所有API请求即可。

注意事项 #

• 检查代码中是否有**硬写http://localhost:3000**的请求地址，全部替换为相对路径或上述配置的baseURL。
• 环境变量必须以REACT_APP_开头，Create React App才会识别并注入到代码中。

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