本文旨在帮助开发者理解在使用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。
解决方案和注意事项
确保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应用。
总结
理解前后端分离的架构是解决此类问题的关键。React应用负责渲染用户界面，而Spring Boot应用负责提供API接口。通过正确配置API请求、CORS和路由，可以确保前后端能够顺利地协同工作。在开发过程中，务必区分直接访问后端API和通过React应用发起API请求的区别，避免混淆概念。
