解决React fetch()请求Spring Boot API时遇到的问题-java教程-PHP中文网

解决React fetch()请求Spring Boot API时遇到的问题

聖光之護

发布： 2025-11-16 16:44:01

原创

466人浏览过

解决react fetch()请求spring boot api时遇到的问题

本文旨在帮助开发者理解在使用React前端与Java Spring Boot后端进行交互时，fetch()请求可能遇到的问题。通过分析不同场景下的URL配置和控制器设置，解释了为何某些请求能够正确渲染React组件，而另一些请求仅返回后端数据，并提供了相应的解决方案。

在使用React构建前端应用，并使用Java Spring Boot构建后端API时，开发者经常会遇到一些fetch()请求的问题。这些问题通常表现为：某些API接口可以正确地将后端数据渲染到React组件中，而另一些接口则只能直接返回后端数据，无法触发React组件的渲染。本文将深入探讨这些问题的原因，并提供相应的解决方案。

理解前后端分离的本质

在深入问题之前，我们需要明确前后端分离的本质。React应用通常运行在独立的开发服务器上（例如localhost:3000），而Spring Boot应用运行在另一个服务器上（例如localhost:8080）。React应用通过fetch()等方法向Spring Boot应用发起HTTP请求，获取数据，然后将数据渲染到用户界面上。

当你在浏览器中直接访问localhost:8080/api/v1/hello时，你实际上是直接向Spring Boot应用发起了请求。Spring Boot应用接收到请求后，会根据配置的路由规则找到对应的Controller方法，执行该方法并返回结果。这个过程中，React应用并没有参与，因此你只能看到后端返回的原始数据。

Case 1: fetch('http://localhost:8080/api/v1/hello')

当你在React组件中使用fetch('http://localhost:8080/api/v1/hello')时，React应用会向Spring Boot应用发起一个异步请求。Spring Boot应用返回的数据会被React应用接收，然后通过setMessage(message)更新组件的状态，最终触发组件的重新渲染。

关键在于，React应用负责渲染整个页面，包括从后端获取的数据。如果你直接在浏览器地址栏输入localhost:8080/api/v1/hello，浏览器只会显示后端返回的字符串，而不会加载和渲染React组件。

Case 2: fetch('http://localhost:8080') 和 "/" endpoint

fetch('http://localhost:8080') 配合 @RequestMapping(path = "/") 的Controller，同样遵循上述原则。直接访问 localhost:8080 浏览器只会显示后端返回的字符串，不会加载 React 组件。React 组件需要通过 fetch 获取数据并更新状态，才能在 React 应用中显示。

Case 3: 同时存在多个Controller

当同时存在多个Controller时，例如既有处理/api/v1/hello的BasicController，又有处理/的StartPageController，Spring Boot会根据请求的URL选择合适的Controller来处理。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

如果你的React应用仍然使用fetch('http://localhost:8080/api/v1/hello')，但浏览器直接访问localhost:8080，那么浏览器会显示StartPageController返回的数据。这并不意味着React应用无法工作，而是因为你访问了不同的URL，导致Spring Boot应用选择了不同的Controller。

解决方案和注意事项

确保React应用正常运行: 首先，确保你的React应用已经成功启动，并且可以通过localhost:3000（或其他配置的端口）访问。
正确配置API请求: 在React应用中，使用fetch()或其他HTTP客户端库（如Axios）向Spring Boot应用发起API请求，并处理返回的数据。

CORS配置: 确保Spring Boot应用配置了CORS（跨域资源共享），允许来自React应用的请求。可以在Controller类上添加@CrossOrigin注解，或者在Spring Boot配置中进行全局配置。

@RestController
@CrossOrigin(origins = "http://localhost:3000") // 允许来自localhost:3000的请求
@RequestMapping(path = "/api/v1")
public class BasicController {

    @GetMapping("/hello")
    public String sayHello() {
        return "Hello Everyone !";
    }
}

登录后复制

区分前后端路由: 明确前端路由（由React Router等库管理）和后端路由（由Spring Boot Controller管理）的区别。前端路由负责在React应用内部导航，后端路由负责处理API请求。
统一入口: 通常情况下，会将React应用打包成静态资源，并将其放置在Spring Boot应用的src/main/resources/static目录下。这样，当用户访问Spring Boot应用的根路径时，Spring Boot会返回React应用的入口文件（通常是index.html），从而启动React应用。