一个基本的前后端分离的项目,前端使用Vue,后端使用SprinBoot
原因是请求里面请求头不包含access-control-allow-origin,这是浏览器的保护机制,不是请求没到后端
这个原因是同源策略,也就是要求协议,域名,端口都相同的才是同源,这里的端口不同
- Vue: http://localhost:8080
- SpringBoot:http://localhost:8081/list
跨域资源共享的后端解决方法
CORS :Cross Origin Resource Sharding
1、在目标方法上添加@CrossOrigin
注解
@GetMapping (" /1ist")
Crossorigin
pub7ic List<string> list({i
List<string> list = Arrays.asList("Java" , "C++", "Go");return list;
}
2.添加CORS过滤器
如果方法很多,一个个方法上添加很麻烦,可以考虑实现一个CORS过滤器
@configuration
public class corsConfig {
@Bean
pub1ic corsFilter corsFi7ter({
corsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addA77owedorigin("*");
corsconfiguration.addA1lowedHeader("*");
corsConfiguration.addA17owedMethod("*");
ur1BasedcorsconfigurationSource source = new UrlBasedcorsconfigurationsource();
source.registerCorsConfiguration(" /**",corsconfiguration) ;
return new CorsFi7ter(source);
}
}
3.实现WebMvcConfigurer 接口,重写addCorsMappings方法
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping( pathPattern: "/**")
.allowedOriginPatterns("*")
.allowedMethods("GET", "POST","PUT","DELETE","HEAD","OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders( "*");
}
}