本地跨端口React与Spring Boot联调CORS问题咨询

1. 解决跨域问题后本地环境是否可以正常运行？ #

完全可以。只要在SpringBoot后端正确配置跨域规则，允许前端localhost:3000的请求来源，就能消除跨域报错，前后端的登录校验流程可正常跑通。

常见的SpringBoot跨域配置方式有两种：

• 局部接口配置：在处理登录校验的Controller方法或类上添加@CrossOrigin(origins = "http://localhost:3000")注解，仅开放指定接口的跨域权限。
• 全局配置：创建CORS过滤器，统一允许所有接口接收localhost:3000的请求：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://localhost:3000");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

配置完成后，前端正常发起登录请求即可，不会再出现No 'Access-Control-Allow-Origin' header的报错，本地环境能正常运行。

2. 开发测试时使用本地不同端口进行联调是否为最佳实践？ #

本地不同端口联调是开发阶段非常普遍的操作，但称不上绝对的最佳实践，要结合场景判断：

• 优点：前后端服务可以独立启动、独立热更新，各自调试互不干扰，开发效率高，适合前后端并行开发的场景。
• 可优化点：如果想更贴近生产环境的请求模式，推荐使用前端代理的方式：
  在React项目的package.json中添加proxy配置：

  "proxy": "http://localhost:8080"
  

  这样前端请求时直接写/api/login，会自动代理到http://localhost:8080/api/login，既避免了跨域问题，又不用在代码中硬编码后端地址，更符合生产环境的请求逻辑。

总的来说，本地不同端口联调完全可行，是开发初期的常规选择；而前端代理的方式更贴近生产，适合后期联调或模拟生产环境测试。

内容的提问来源于stack exchange，提问作者Shanmuga PriyaV sp