Springboot+vue后端处理跨域问题

遇到的问题

前端使用8081端口向后台访问8080端口时，浏览器会出现跨域报错

---

---

一、处理方式一

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class webMvcConfig implements WebMvcConfigurer {

    /**
     * 跨域配置
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

二、处理方式二

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 {

    private static final long MAX_AGE=24*60*60;

    @Bean
    public CorsFilter corsFilter(){
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration=new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }

}

总结

方式一的特点和用法：

• 使用 WebMvcConfigurer 接口来配置跨域。
• 通过 addCorsMappings
  方法配置跨域规则，可以设置允许跨域的路径、允许的域名模式、是否允许发送认证信息（cookies）、允许的请求方法、请求头等。
• 适合于基于 Spring MVC 的项目，提供了更细粒度的配置选项。

方式二的特点和用法：

• 使用 CorsFilter 类来配置全局的跨域策略。
• 通过 CorsConfiguration 类来配置允许的跨域原点、请求头、请求方法等。
• 适合于直接注册一个全局的 CORS 过滤器，可以对所有请求路径进行统一的跨域配置。

区别和选择：

• WebMvcConfigurer 方式更为集成化，直接在 Spring MVC 的配置中进行跨域配置，适合于项目需要更细致控制的场景。
• CorsFilter 方式通过单独配置一个过滤器来实现跨域，适合于全局统一配置的需求，或者在不使用 Spring MVC 的情况下使用。

灵活性：

• 使用 WebMvcConfigurer 可以结合 Spring MVC 提供的其他功能进行更灵活的配置，例如拦截器、参数解析器等。
• 使用 CorsFilter 则更为直接，适合于简单的跨域配置需求。

项目环境：

• 如果你的项目已经使用了 Spring MVC，并且需要对跨域请求进行详细配置，推荐使用 WebMvcConfigurer 方式。
• 如果你希望在全局统一处理跨域请求，或者是在非 Spring MVC 项目中配置跨域，可以考虑使用 CorsFilter 方式。