Create React App对接Express后端开发与生产环境代理配置问题

1. 前端环境变量配置 #

Create React App要求自定义环境变量必须以REACT_APP_开头，按如下配置两个环境的env文件：

• .env.development（开发环境生效）

REACT_APP_API_BASE_URL = ''

• .env.production（生产构建生效）

REACT_APP_API_BASE_URL = ''

两个环境都留空值，所有接口请求走相对路径，完全不需要硬编码域名，符合运维要求。

前端发起接口请求时统一按如下格式编写：

// 示例：调用verify接口
fetch(`${process.env.REACT_APP_API_BASE_URL}/api/verify`, {
  // 你的请求配置
})

2. 前端开发代理修正 #

修改package.json中的proxy配置，补充协议头，否则CRA本地代理会报错：

"proxy": "http://localhost:8081"

本地执行yarn start时，所有/api开头的请求会被自动代理到本地启动的Express服务，无需额外配置。

3. Express CORS配置适配 #

原CORS配置仅允许本地8081端口访问，不符合实际请求场景，修改为动态适配开发/生产环境：

// server.js中修改corsOptions配置
const corsOptions = {
  // 开发环境允许CRA默认启动的3000端口访问，生产环境读取配置的允许域名
  origin: process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : process.env.ALLOWED_ORIGIN,
  credentials: true
}

生产环境可在Express的.env文件中配置ALLOWED_ORIGIN为你的前端业务域名即可，若生产环境前后端通过Nginx同域名转发，也可直接关闭CORS配置避免额外校验。

4. Nginx代理配置（供运维参考） #

不需要硬编码任何业务域名，仅通过路径匹配实现/api请求转发，示例配置如下：

# 转发所有api请求到后端Express服务
location /api/ {
  proxy_pass http://Express服务内网地址:8081/;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# 前端静态资源配置
location / {
  root /path/to/CRA构建后的build目录;
  try_files $uri $uri/ /index.html;
}

效果验证 #

• 本地开发：执行yarn start，访问页面发起请求会自动代理到本地8081端口的Express服务，无跨域问题
• 生产部署：执行yarn build生成静态资源，部署到Nginx后所有/api请求会自动转发到后端服务，全程无硬编码域名，符合运维要求

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