React+Axios对接Spring Boot后端失败及跨域错误解决咨询

一、POST请求覆盖已有ID数据的修复 #

Postman测试时POST会覆盖同ID数据，说明后端POST接口逻辑并非新增数据，而是根据ID执行更新操作，按以下步骤修复：

1. 修正实体类ID生成策略 #

确保ID由后端自动生成，避免前端传入已存在的ID导致覆盖：

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY) // 数据库自增主键
    private Long id;
    private String username;
    private String password;
    // 其他字段、getter/setter方法
}

2. 调整Controller层POST接口逻辑 #

强制清空前端传入的ID，确保接口执行新增操作：

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserService userService;

    // 用户注册接口：仅新增数据
    @PostMapping
    public ResponseEntity<User> registerUser(@RequestBody User user) {
        user.setId(null); // 清空ID，避免前端传入已存在的ID
        User savedUser = userService.saveUser(user);
        return ResponseEntity.status(HttpStatus.CREATED).body(savedUser);
    }
}

3. 确认Service层逻辑 #

确保Service仅调用Repository的保存方法，无额外更新判断：

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    public User saveUser(User user) {
        return userRepository.save(user);
    }
}

二、前后端对接的CORS与Axios错误修复 #

1. 验证CORS配置有效性 #

若使用WebConfig配置CORS，需确保规则覆盖所有必要场景：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // 匹配所有API路径
                .allowedOrigins("http://localhost:3000") // React前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                .allowedHeaders("*") // 允许所有请求头
                .allowCredentials(true); // 需携带Cookie时开启
    }
}

• 若项目集成Spring Security，需额外放行OPTIONS预检请求：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and() // 启用CORS配置
            .csrf().disable() // 开发环境临时关闭CSRF，生产环境按需配置
            .authorizeRequests()
            .antMatchers("/api/**").permitAll(); // 放行API路径
    }
}

2. 修正Axios请求代码 #

确保请求URL、参数格式与后端匹配：

import axios from 'axios';

// 注册请求方法
const registerUser = async (userData) => {
    try {
        const response = await axios.post('http://localhost:8080/api/users', userData, {
            headers: {
                'Content-Type': 'application/json',
            }
        });
        console.log('注册成功', response.data);
        return response.data;
    } catch (error) {
        console.error('注册失败', error.response?.data || error.message);
        throw error;
    }
};

// 调用示例
// registerUser({ username: 'test_user', password: '123456' });

• 检查点：后端服务端口（默认8080）与前端请求URL一致；请求参数字段与后端实体类匹配；前端服务运行在http://localhost:3000。

3. 排查ERR_NETWORK错误 #

• 确认后端服务正常启动，端口未被占用；
• 关闭本地防火墙或代理工具，避免请求被拦截；
• 开发环境下优先使用HTTP协议，避免HTTPS证书问题。

三、快速验证流程 #

1. 重启后端服务，确保新配置生效；
2. 用Postman测试POST接口，传入不带ID的参数，确认数据新增而非覆盖；
3. 运行React前端，调用注册接口，查看控制台是否仍有CORS错误；
4. 打开浏览器开发者工具Network标签，检查OPTIONS请求的响应头是否包含Access-Control-Allow-Origin。

内容的提问来源于stack exchange，提问作者Simon Riley