跨域原理与解决方式

跨域问题

同源策略（Same-origin policy）

• 什么是同源策略？

• 浏览器端对请求的处理中，如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源

• 同源

  1 http://www.domaina.com/index

  2 http://www.domaina.com/module/path1

• 非同源

  1 http://www.domaina.com/index

  2 https://www.domaina.com/module/path1

  1 http://www.domaina.com/index

  2 http://www.domainb.com/module/path1

  1 http://www.domaina.com/index

  2 http://www.domaina.com:8081/module/path1

• 两个相同的源之间浏览器默认其是可以相互访问资源和操作 DOM 的。两个不同的源之间

  若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约。具体有如下两 方面的限制

  1. 安全性：

     浏览器要防止当前站点的私密数据不会向其他站点发送

     如当前站点的Cookie,LocalStorage,IndexDb 不会被发送到其他站点或被其他站点脚本读取到无法跨域获取Dom，无法发送Ajax请求。

  2. 可用性：

     大型站点的图片，音视频等资源，希望部署在独立服务器上，为缓解当前服务 的压力，开放某些特定的方式，访问非同源站点 如：<script><img><iframe><link><vedio>等，可以同src属性跨域访问 允许跨域提交表单/或重定向请求

• 跨域问题本质就是浏览器同源策略问题

---

---

简单请求和复杂请求

a. 简单请求：

• 请求方法使用GET/HEAD/POST请求之一

• 仅能使用CORS安全的头部，Accept,Accept-Language, Content-Language,Content-Type

• Content-Type的值只能是：

  • text/plain,multipart/form-data,application/x- www-form- urlencoded三者其中之一

• 服务端解决方案：

  • 在http响应头中添加 Access-Control-Allow-Origin 头，值为信任的 站点。

b. 复杂请求

不符合简单请求条件的即为复杂请求，访问跨域资源前，需要发起preflight预检请求

（OPTIONS请求）询问何种请求是被允许的，预检请求失败，则不会发起正式的业务请

求，预检请求成功，然后发起正式请求。

当发起跨域请求时，简单请求只发起一次请求；复杂请求则需要2次，先发起options请求，确认目标资源是否支持跨域，浏览器会根据服务端响应的header自动处理剩余的请求，如果响应支持跨域，则继续发出正常请求；不支持的话，会在控制台显示错误。

OPTIONS 请求的一些头信息

• 

• 服务器端设置 Access-Control-Max-Age 字段，那么当第一次请求该 URL 时会发出 OPTIONS 请求，浏览器会根据返回的 Access-Control-Max-Age 字段缓存该请求的 OPTIONS 预检请求的响应结果（具体缓存时间还取决于浏览器的支持的默认最大值，取两者最小值，一般为 10 分钟）。在缓存有效期内，该资源的请求（URL 和 header 字段都相同的情况下）不会再触发预检。

解决跨域方案

1 服务端解决方案:

springBoot解决跨域的几种方式

• 通过@CrossOrigin注解

• 通过配置文件

  • 用拦截工具看，可以发现这种方式其实就是增加了OPTIONS
  • 

• 通过CorsFilter 过滤器

  • @Configuration // 一定不能忽略此注解
    public class MyCorsFilter {
        @Bean
        public CorsFilter corsFilter() {
            // 1.创建 CORS 配置对象
            CorsConfiguration config = new CorsConfiguration();
            // 支持域
            config.addAllowedOriginPattern("*");
            // 是否发送 Cookie
            config.setAllowCredentials(true);
            // 支持请求方式
            config.addAllowedMethod("*");
            // 允许的原始请求头部信息
            config.addAllowedHeader("*");
            // 暴露的头部信息
            config.addExposedHeader("*");
            // 2.添加地址映射
            UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
            corsConfigurationSource.registerCorsConfiguration("/**", config);
            // 3.返回 CorsFilter 对象
            return new CorsFilter(corsConfigurationSource);
        }
    }
    
    

• 通过Response

  • 只能解决简单请求

  • @RestController
    public class TestController {
        @RequestMapping("/test")
        public HashMap<String, Object> test(HttpServletResponse response) {
            // 设置跨域
            response.setHeader("Access-Control-Allow-Origin", "*");
            return new HashMap<String, Object>() {{
                put("state", 200);
                put("data", "success");
                put("msg", "");
            }};
        }
    }
    

• 通过ResponseBodyAdvice

  • 本质就是通过Response

  • @ControllerAdvice
    public class ResponseAdvice implements ResponseBodyAdvice {
        /**
         * 内容是否需要重写（通过此方法可以选择性部分控制器和方法进行重写）
         * 返回 true 表示重写
         */
        @Override
        public boolean supports(MethodParameter returnType, Class converterType) {
            return true;
        }
        /**
         * 方法返回之前调用此方法
         */
        @Override
        public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType,
                                      Class selectedConverterType, ServerHttpRequest request,
                                      ServerHttpResponse response) {
            // 设置跨域
            response.getHeaders().set("Access-Control-Allow-Origin", "*");
            return body;
        }
    }
    

2 代理服务器，反向代理接口请求

apache http server / nginx

•  location /api { 
  
   rewrite ^/api/(.*)$ /$1 break; 
  
   proxy_pass http://localhost:8081/; # 比如说先到gateWay
  
   } 
  

3 jsonp 方式

• 一般也不用它， 太死板了

​ - <script><img><iframe><link><vedio>等，可以同src属性跨域访问 允许跨域提交表单/或重定向请求

•