1、跨域的原因:
由于同源策略(Same Origin Policy)的限制,浏览器不允许跨域请求。同源策略规定,A网页设置的Cookie、LocalStorage和IndexDB无法被同源以外的网页读取。
2、原因:
1)浏览器的同源策略(Same Origin Policy)限制了跨域请求。主要出于安全考虑,浏览器限制脚本只能读取与之同源的资源。同源指的是协议、域名、端口都相同。跨域请求会因为违反同源策略而被阻止
2)Cookie和本地存储也遵循同源策略。A域名下的页面无法读取B域名下的Cookie、localStorage等
3)跨域JavaScript请求会报错。比如A页面请求B页面的JS文件,就会报错
3、常见跨域请求
1)JSONP:通过script标签加载JS文件来实现跨域通信
2)CORS:服务器端设置HTTP头,允许指定的请求来源跨域访问
3)postMessage:A域的window向B域的window发送消息,实现跨域通信
4、实现跨域的几种方式
1)@crossOrigin 注解
@CrossOrigin(origins = "http://domain1.com")
@RestController
public class TestController {
@GetMapping("/test")
public String test() {
return "hello";
}
}
2)过滤器CorsFilter
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("http://domain1.com");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
3).配置类WebMvcConfigurer
描述:可以在WebMvcConfigurer接口的addCorsMappings()方法中添加跨域配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://domain1.com")
.allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH")
.allowedHeaders("*")
.allowCredentials(true);
}
}