【SpringBoot系列】实现跨域的几种方式

一、什么是跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,或者涉及到两个不同域名的资源之间的交互。由于同源策略(Same Origin Policy)的限制,浏览器不允许跨域请求。同源策略规定,A网页设置的Cookie、LocalStorage和IndexDB无法被同源以外的网页读取。跨域请求会被浏览器拒绝。举个例子:- DOMAIN-A.com 和 DOMAIN-B.com 是两个不同的域名,它们之间的请求就是跨域请求。- DOMAIN-A.com/dir1 和 DOMAIN-A.com/dir2 虽然路径不同,但是域名相同,所以不是跨域。

二、跨域问题出现的原因

1. 浏览器的同源策略(Same Origin Policy)限制了跨域请求。主要出于安全考虑,浏览器限制脚本只能读取与之同源的资源。同源指的是协议、域名、端口都相同。跨域请求会因为违反同源策略而被阻止。
2. Cookie和本地存储也遵循同源策略。A域名下的页面无法读取B域名下的Cookie、localStorage等。
3. 跨域JavaScript请求会报错。比如A页面请求B页面的JS文件,就会报错。
4. 跨域DOM无法访问。A页面的JS无法获取B页面的DOM节点。
5. 跨域数据请求需要进行CORS预检。浏览器会在正式通信之前,先进行一次HTTP查询请求,询问服务器是否允许跨源请求。
6. iframe也受同源策略限制。A页面的iframe嵌入B页面,A页面JS无法访问iframe的DOM。
7. 跨域图片获取限制。A页面无法获取B页面img标签的src,会报错。

三、常见的跨域请求方式

1. JSONP:通过script标签加载JS文件来实现跨域通信。
2. CORS:服务器端设置HTTP头,允许指定的请求来源跨域访问。
3. 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跨域过滤器,如:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        //设置预检请求有效期 30min
        corsConfiguration.setMaxAge(1800L);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        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);
  }
}

这也是一种比较常用的跨域解决方案。