react和springboot如何连接
React 与 Spring Boot 的连接方法
React 作为前端框架，Spring Boot 作为后端框架，通常通过 RESTful API 进行通信。以下是实现两者连接的详细方法。
配置 Spring Boot 后端
Spring Boot 需要提供 RESTful API 接口供 React 调用。创建一个简单的控制器类：
@RestController
@RequestMapping("/api")
public class DemoController {
@GetMapping("/message")
public String getMessage() {
return "Hello from Spring Boot!";
}
@PostMapping("/data")
public ResponseEntity<String> postData(@RequestBody String data) {
return ResponseEntity.ok("Received: " + data);
}
}确保在 application.properties 或 application.yml 中配置端口（如 server.port=8080），并启用跨域支持：
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/")
.allowedOrigins("http://localhost:3000") // React 默认端口
.allowedMethods("GET", "POST");
}
}配置 React 前端
在 React 项目中，使用 fetch 或 axios 调用 Spring Boot API。安装 axios：
npm install axios在 React 组件中调用 API：
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
const [message, setMessage] = useState('');
useEffect(() => {
axios.get('http://localhost:8080/api/message')
.then(response => setMessage(response.data))
.catch(error => console.error(error));
}, []);
const postData = () => {
axios.post('http://localhost:8080/api/data', 'Sample Data')
.then(response => alert(response.data))
.catch(error => console.error(error));
};
return (
<div>
<p>Message from Spring Boot: {message}</p>
<button onClick={postData}>Send Data</button>
</div>
);
}
export default App;处理跨域问题
如果未在 Spring Boot 中配置 CORS，可以在 React 的 package.json 中设置代理：
"proxy": "http://localhost:8080"然后修改 React 中的请求 URL 为相对路径：
axios.get('/api/message')部署注意事项
生产环境中，确保前后端部署在同一域名下或正确配置跨域。Spring Boot 可打包为 JAR 文件，React 构建后静态文件可放入 Spring Boot 的 resources/static 目录。
# Spring Boot 打包
mvn package
# React 构建
npm run build将 React 的 build 目录内容复制到 Spring Boot 的 src/main/resources/static 目录，重新打包即可。
