前端跨域问题

跨域

指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对 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）

前端设置：根据 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

3.反向代理

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

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

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

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