版权声明:需要引用、发表的朋友请与本人联系 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,这时保留一端作为跨域即可。