Docker Compose环境下React无法接收SpringBoot后端数据问题求助

我期望通过docker-compose启动服务后，localhost主页能显示from backend : Hi. This is Spring speaking.，但实际只显示from backend :。未使用docker-compose时功能正常运行，相关代码如下，求解决办法。

React 部分 #

app.js #

import React, {useEffect, useState} from 'react';
import axios from 'axios';

function App() {
   const [hello, setHello] = useState('')

    useEffect(() => {
        axios.get('/api/hello')
        .then(response => setHello(response.data))
        .catch(error => console.log(error))
    }, []);

    return (
        <div>
            from backend : {hello}
        </div>
    );
}

export default App;

setupProxy.js #

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://backend:8080',
      changeOrigin: true,
    })
  );
};

Dockerfile #

FROM node:alpine
COPY package.json ./
RUN npm install
COPY ./ ./
CMD ["npm","run","start"]

SpringBoot 部分 #

IndexController.java #

package com.chickenbandits.daeily.web;

import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RequiredArgsConstructor
@RestController
public class IndexController {

    @GetMapping("/api")
    public String index() {
        return "index";
    }

    @GetMapping("/api/hello")
    public String hello() { return "Hi. This is Spring speaking."; }
}

Dockerfile #

FROM openjdk:18
ARG JAR_FILE=*.jar
COPY build/libs/daeily-*-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-jar","app.jar"]

docker-compose.yml #

version: '3'
services:
  backend:
    image: "0rdinary/daeily"
    ports:
      - "8080:8080"
  frontend:
    image: "0rdinary/daeily-front"
    ports:
      - "80:3000"

• 检查容器网络连通性
  进入frontend容器执行curl http://backend:8080/api/hello，看是否能返回预期字符串。如果不通，先查backend容器日志docker-compose logs backend，确认SpringBoot是否正常启动在8080端口。

• 核对代理路径匹配逻辑
  当前代理会把/api/hello转发到http://backend:8080/api/hello，如果SpringBoot配置了server.servlet.context-path=/api，这个路径是对的；如果没配置，转发路径会变成/api/api/hello导致404，需检查SpringBoot配置文件。也可以尝试添加路径重写规则测试：

  createProxyMiddleware({
    target: 'http://backend:8080',
    changeOrigin: true,
    pathRewrite: { '^/api': '' }
  })
  

• 查看浏览器请求日志
  打开浏览器控制台的Network面板，查看/api/hello请求的状态码和响应内容：如果是404说明路径错误；如果是200但响应为空，检查SpringBoot接口返回逻辑。

• 调整容器启动顺序
  frontend可能在backend未就绪时发起请求，导致首次请求失败。给docker-compose添加健康检查和依赖配置：

  services:
    backend:
      image: "0rdinary/daeily"
      ports:
        - "8080:8080"
      healthcheck:
        test: ["CMD", "curl", "-f", "http://localhost:8080/api/hello"]
        interval: 10s
        timeout: 5s
        retries: 5
    frontend:
      image: "0rdinary/daeily-front"
      ports:
        - "80:3000"
      depends_on:
        backend:
          condition: service_healthy
  

• 临时添加跨域配置排查
  虽然用了代理，但可临时给SpringBoot添加跨域配置排除跨域问题：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("*")
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowedHeaders("*");
      }
  }
  

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