SpringBoot学习笔记(15)-跨域请求

vue项目中常使用axios来发送ajax请求给SpingBoot后台接口，可是这会出现跨域请求问题，即vue项目的运行端口是8080，而boot项目运行在别的机器别的端口上，这时有两种方式去解决它，第一种是在前端那使用proxytalbe配置跨域，第二种是在boot中配置接受跨域请求。

一、创建运行跨域请求的配置文件

• CorsConfig

@Configuration
@EnableWebMvc
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
   		 //允许所有形式的跨域请求
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }
    //运行跨域,上线后注释掉
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        List<String> list = new ArrayList<>();
        list.add("*");
        corsConfiguration.setAllowedOrigins(list);
		    /*
		    // 请求常用的三种配置，*代表允许所有，当时你也可以自定义属性（比如header只能带什么，只能是post方式等等）
		    */
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

二、在需要跨域请求的Controller或者方法上添加@CrossOrigin注解

三、跨域请求失败

一般来说，不允许在前端和后端都配置跨域请求，如果都配置了跨域请求那么会造成请求404，这时保留一端作为跨域即可。