一、什么是跨域(CORS)
跨域(CORS)是指不同域名之间的互相访问,本地服务器去访问另一个服务器的资源,这个时候就会出现跨域访问的问题,是由浏览器对于JavaScript所定义的安全限制策
同域:
- 同一协议, 如http或https
- 同一IP地址, 如192.168.1.2
- 同一端口, 如8080
以上三个条件中有一个条件不同就会产生 跨域问题
二、跨域解决方案
1.前端解决方案
1.1 使用 JSONP 来支持跨域的请求
1.2 使用NodeJS服务器做为服务代理
2.后端解决方案
这里有三种配置方式
2.1 配置过滤器
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("*");
config.setAllowCredentials(true);
config.addAllowedMethod("*");
config.addAllowedHeader("*");
config.addExposedHeader("*");
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
return new CorsFilter(configSource);
}
}
2.2 配置拦截器
@Configuration
public class MyConfiguration extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedMethods(httpMethod.GET.name(),httpMethod.POST.name(),httpMethod.PUT.name(),httpMethod.PATCH.name(),httpMethod.DELETE.name())//允许访问的类型
.allowCredentials(true)
.allowedHeaders("*")
.allowedOrigins("*")
.maxAge(3600);
}
}
2.3单个请求跨域请求
@RequestMapping("/hello")
@CrossOrigin("http://localhost:8080")
public String hello( ){
return "Hello World";
}
另:本人刚开始写博客,小白,想用博客记录问题点,欢迎大佬们评论不足的地方,多交流
来源:oschina
链接:https://my.oschina.net/u/4263294/blog/3290946