Docker环境下Create-React-App代理WordPress API失败求助

你的推测完全正确——Docker容器各自拥有独立的网络命名空间，前端容器里的localhost指向容器自身，而非宿主机，所以无法访问到宿主机端口8000上的WordPress服务。下面是具体的解决步骤：

1. 修正前端代理配置（开发环境） #

在前端的package.json中，将proxy字段从http://localhost:8000改为Docker Compose中WordPress服务的内部地址：

"proxy": "http://wordpress:80"

解释：

• 在Docker Compose的同一个网络（wpsite）中，服务名称（这里是wordpress）可以直接作为域名解析到对应容器。
• WordPress容器内部暴露的端口是80（而非宿主机映射的8000），所以要使用容器内部端口。

2. 优化前端Docker配置（可选但推荐） #

你的前端Dockerfile里包含了RUN npm build，但开发环境下npm start并不需要预构建，建议移除这一步，避免不必要的构建时间：

FROM node:10-alpine
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app/
RUN npm install
ADD src /usr/src/app/src
ADD public /usr/src/app/public
CMD [ "npm", "start" ]

3. 生产环境适配（提前准备） #

如果后续要部署生产环境的静态前端，Create-React-App的proxy配置不再生效（仅开发服务器可用），建议通过环境变量管理API地址：

• 在docker-compose.yml的frontend服务中添加环境变量：

  frontend:
    # ... 其他配置
    environment:
      - REACT_APP_API_URL=http://wordpress:80
  

• 在前端代码中使用环境变量发起请求（以axios为例）：

  axios.get(`${process.env.REACT_APP_API_URL}/wp-json/wp/v2/pages`)
    .then(response => { /* 处理响应 */ })
    .catch(error => { /* 处理错误 */ })
  

4. 重启容器验证 #

修改配置后，重启前端容器：

docker-compose restart frontend

此时前端的请求会被正确代理到WordPress容器，应该能正常获取API数据了。

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