SpringBoot配置接受跨域请求

版权声明:需要引用、发表的朋友请与本人联系 https://blog.csdn.net/pbrlovejava/article/details/86529796

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,这时保留一端作为跨域即可。

猜你喜欢

转载自blog.csdn.net/pbrlovejava/article/details/86529796