【SpringBoot系列】实现跨域的几种方式
一、什么是跨域
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,或者涉及到两个不同域名的资源之间的交互。由于同源策略(Same Origin Policy)的限制,浏览器不允许跨域请求。同源策略规定,A网页设置的Cookie、LocalStorage和IndexDB无法被同源以外的网页读取。跨域请求会被浏览器拒绝。举个例子:- DOMAIN-A.com 和 DOMAIN-B.com 是两个不同的域名,它们之间的请求就是跨域请求。- DOMAIN-A.com/dir1 和 DOMAIN-A.com/dir2 虽然路径不同,但是域名相同,所以不是跨域。
ss
二、跨域问题出现的原因
- 浏览器的同源策略(Same Origin Policy)限制了跨域请求。主要出于安全考虑,浏览器限制脚本只能读取与之同源的资源。同源指的是协议、域名、端口都相同。跨域请求会因为违反同源策略而被阻止。
- Cookie和本地存储也遵循同源策略。A域名下的页面无法读取B域名下的Cookie、localStorage等。
- 跨域JavaScript请求会报错。比如A页面请求B页面的JS文件,就会报错。
- 跨域DOM无法访问。A页面的JS无法获取B页面的DOM节点。
- 跨域数据请求需要进行CORS预检。浏览器会在正式通信之前,先进行一次HTTP查询请求,询问服务器是否允许跨源请求。
- iframe也受同源策略限制。A页面的iframe嵌入B页面,A页面JS无法访问iframe的DOM。
- 跨域图片获取限制。A页面无法获取B页面img标签的src,会报错。
三、常见的跨域请求方式
- JSONP:通过script标签加载JS文件来实现跨域通信。
- CORS:服务器端设置HTTP头,允许指定的请求来源跨域访问。
- postMessage:A域的window向B域的window发送消息,实现跨域通信。
四、SpringBoot实现跨域的几种方式
1.@crossOrigin 注解我们可以在Controller的方法上直接使用@CrossOrigin注解,如:
@CrossOrigin(origins = "http://domain1.com")
@RestController
public class TestController {
@GetMapping("/test")
public String test() {
return "hello";
}
}
这种方式简单适用,但是不能应对所有的跨域请求,比较局限。
2.过滤器CorsFilter我们可以注册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);
}
}
这也是一种比较常用的跨域解决方案。