React调用SpringBoot接口常见问题解析

在使用React前端与Spring Boot后端进行交互时，`fetch()`请求问题是开发者经常遇到的挑战。本文深入剖析了React应用与Spring Boot API交互过程中，请求URL配置、Controller设置以及CORS跨域问题等关键因素，解释了为何某些API接口能成功渲染React组件，而另一些仅返回后端数据。文章通过具体案例，例如`fetch('http://localhost:8080/api/v1/hello')`和根路径("/")的处理，阐述了前后端分离的本质。针对这些问题，本文提供了详细的解决方案，包括正确配置API请求、CORS策略以及区分前后端路由等，旨在帮助开发者高效解决React调用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来处理。

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

解决方案和注意事项

1. 确保React应用正常运行: 首先，确保你的React应用已经成功启动，并且可以通过localhost:3000（或其他配置的端口）访问。

2. 正确配置API请求: 在React应用中，使用fetch()或其他HTTP客户端库（如Axios）向Spring Boot应用发起API请求，并处理返回的数据。

3. 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 !";
       }
   }

4. 区分前后端路由: 明确前端路由（由React Router等库管理）和后端路由（由Spring Boot Controller管理）的区别。前端路由负责在React应用内部导航，后端路由负责处理API请求。

5. 统一入口: 通常情况下，会将React应用打包成静态资源，并将其放置在Spring Boot应用的src/main/resources/static目录下。这样，当用户访问Spring Boot应用的根路径时，Spring Boot会返回React应用的入口文件（通常是index.html），从而启动React应用。

总结

理解前后端分离的架构是解决此类问题的关键。React应用负责渲染用户界面，而Spring Boot应用负责提供API接口。通过正确配置API请求、CORS和路由，可以确保前后端能够顺利地协同工作。在开发过程中，务必区分直接访问后端API和通过React应用发起API请求的区别，避免混淆概念。

今天关于《React调用SpringBoot接口常见问题解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！