当前位置：首页 > React

springmvc如何跑react

2026-02-26 17:42:49React

Spring MVC 与 React 集成方法

将 React 与 Spring MVC 结合可以通过前后端分离或嵌入式开发模式实现。以下是两种常见方法：

前后端分离模式

后端配置（Spring MVC）
确保 Spring MVC 配置为提供 RESTful API 服务。通过 @RestController 注解暴露接口，供前端调用。

@RestController
@RequestMapping("/api")
public class ApiController {
    @GetMapping("/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Hello from Spring MVC");
    }
}

前端配置（React）
使用 create-react-app 初始化项目，通过 axios 或 fetch 调用后端接口。

springmvc如何跑react

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

function App() {
    const [data, setData] = useState('');
    useEffect(() => {
        axios.get('http://localhost:8080/api/data')
            .then(response => setData(response.data));
    }, []);
    return <div>{data}</div>;
}
export default App;

跨域处理
若前端运行在 http://localhost:3000，需在 Spring MVC 中配置 CORS：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/")
                .allowedOrigins("http://localhost:3000");
    }
}

嵌入式开发模式

构建 React 生产包
在 React 项目中运行 npm run build，生成静态文件（位于 build 目录）。

springmvc如何跑react

集成到 Spring MVC
将 build 目录内容复制到 Spring MVC 的 src/main/resources/static 目录。Spring Boot 会自动托管静态资源。

配置路由转发
确保前端路由（如 React Router）与后端兼容，添加全局错误处理以返回 index.html：

@Controller
public class SpaController {
    @RequestMapping(value = "/{path:[^\\.]*}")
    public String redirect() {
        return "forward:/index.html";
    }
}