什么是跨域？如何解决跨域问题

一、什么是跨域？

　　指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对 javascript 施加的安全限制。

　　同源策略：是指协议（protocol）、域名（host）、端口号（port），都必须相同，其中一个不同都会产生跨域。

　　http://www.test.com:8000/　　协议（http）、主域名（test）、子域名（www）、端口号（8000）

二、非同源限制

　　无法读取非同源网页的cookie、localStorage、IndexedDB

　　无法接触非同源网页的DOM

　　无法向非同源地址发送 AJAX 请求

三、解决跨域的方法

　　1.JSONP

　　　　原理是：

　　　　　　有些标签 script、img、link、iframe ... 这些标签不存在跨域请求的限制，就是利用这个特点解决跨域问题。

　　　　　　JSONP 是服务器与客户端跨源通信的常用方法。

　　　　优点：简单适用，兼容性好（可以兼容低版本IE），

　　　　缺点：只支持 get 请求，不支持 post 请求，导致数据不安全

　　　　核心思想：网页通过添加一个 <script> 元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

　　　　① 原生实现（JSONP 需要服务端的支持）

          <script src='http://test.com/data?callback=func'></script>
          <!-- 向服务器 test.com 发出请求，该请求的查询字符串有一个 callback 参数，用来指定回调函数的名字 -->
          <!-- 给客户端返回数据 "func('+JSON.stringify(data)+')" ，浏览器把字符串变成 js 表达式执行 -->
　　　　　　<!-- func 需要是一个全局函数 -->
　　　　　　<script type='text/javascript'>
            function func(res){
              // 处理获得的数据
            }
          </script>

　　　　② jQuery 提供了 JSONP 的处理方式

　　　　

 $.ajax({
          url: 'http://www.test.com:8000/login',
          type: 'get',
          dataType: 'jsonp',// 设置请求方式为 jsonp
          jsonpCallback: 'handleCallback',// 自定义回调函数名 
          data: {}
        })

　　　　③ Vue.js

　　　　

 this.$http.jsonp('http://www.test.com:8080/login', {
          params: {},
          jsonp: 'handleCallback'
        }).then(res => {
          //
        });

　2.CORS 跨域资源共享（Cross-Origin Resource Sharing）。

　　　　它是新的 W3C 标准，它新增的一组 HTTP 首部字段允许服务器其声明那些来源请求有权访问哪些资源，就是它允许浏览器向其声明了 CORS 的栈进行跨域请求。

　　　　这种方式最主要的特点就是会在响应的 HTTP 首部增加 Access-Control-Allow-Origin 等信息，从而判定那些资源站可以进行跨域请求，还有几个其他相关的 HTTP 首部进行更加精细化的控制，最主要的还是 Access-Control-Allow-Origin 。

　　　　CORS 与 JSONP 对比来说又是比较明显，JSONP 只支持 GET 方式，而且 JSONP 并不符合处理业务的正常流程。采用 CORS 的方式，前端编码与正常非跨域请求没有什么不同。

　　　　客户端发送请求（ajax）

　　　　　　在真正的发送跨域请求之前会发送一个试探性请求（OPTIONS），服务器接收到 OPTIONS请求之后，做一个处理，返回成功，表示可以发送跨域请求，再发送真正的跨域请求

　　　　服务端设置相关的头信息（需要处理试探性请求OPTIONS）

　　　　2.带 cookie 跨域请求：前后端都需要进行设置

　　　　　　前端设置：根据 xhr.withCredentials 字段判断是否带有 cookie

　　　　　　① 原生 ajax

　　　　

            var xhr = new XMLHttpRequest();// ie8/9 需用 window.XDomainRequest 兼容
        
            // 前端设置是否带 cookie
            xhr.withCredentials = true;
            xhr.open('post', 'http://www.test.com:8000/index', true);
            xhr.setRequestHeader('Content-ype', 'application/x-www-form-urlencoded');
            xhr.send('user=admin');
        
            xhr.onreadystatechange = function() {
              if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText)
              }
            };

　　　　② jQuery ajax

　　　　

$.ajax({
              url: 'http://www.test.com:8000/index',
              type: 'get',
              data: {},
              xhrFields: {
                withCredentials: true// 设置前端是否带 cookie
              },
              crossDomain: true// 会让请求头中包含跨域的额外信息，但不会含 cookie
            });

　　　　　　③ vue-resource

　　　　　　　Vue.http.options.credentials = true

　　　　　　④ axios

　　　　　　　axios.defaults.withCredentials = true

　　　　服务器设置

　　　　　　服务器端对于 CORS 的支持，主要是通过设置 Access-Control-Allow-Origin 来进行的。如果浏览器检测到相应的设置，就可以允许 Ajax 进行跨域访问。

// 不使用*，自动适配跨域域名，避免携带Cookie时失效
String origin = request.getHeader('Origin');
if (StringUtils.isNotBlank(origin)) {
  response.setHeader('Access-Control-Allow-Origin', origin);

}
// 自适应所有自定义头
String headers = request.getHeader('Access-Control-Request-Headers');
if (StringUtils.isNotBlank(headers)) {
  response.setHeader('Access-Control-Allow-Headers', headers);
  response.setHeader('Access-Control-Expose-Headers', headers);
}

// 允许跨域的请求方法类型
response.setHeader('Access-Control-Allow-Methods', '*');
// 预检命令（OPTIONS）缓存时间，单位：秒
response.setHeader('Access-Control-Max-Age', '3600');
// 明确许可客户端发送Cookie，不允许删除字段即可
response.setHeader('Access-Control-Allow-Credentials', 'true');

 　　3.反向代理

　　　　既然不能跨域请求，那么我们不跨域就可以了，通过在请求到达服务器前部署一个服务，将接口请求进行转发，这就是反向代理。通过一定的转发规则可以将前端的请求转发到其他的服务。

　　　　通过反向代理我们将前后端项目统一通过反向代理来提供对外的服务，这样在前端看上去就跟不存在跨域一样。

　　　　反向代理麻烦之处就在原对 Nginx 等反向代理服务的配置，在目前前后端分离的项目中很多都是采用这种方式。

　　proxyTable: {
      '/api': {
        target:'http://api.douban.com/v2', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },