11.跨域解决方方案

1.什么是跨域

同源策略：它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，跨域就是不满足同源策略所产生的错误即当一个请求url地址的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

 如下图：

例如下图控制台报错就是产生了跨域问题

2.非同源限制

当两个url地址不满足同源策略的时候：

1.Cookie、LocalStorage 和 IndexDB 无法读取
2.无法接触非同源网页的 DOM
3.无法向非同源地址发送 AJAX 请求

3.跨域常用解决方案

1.proxy代理

以vue cli3.0为例：

  // vue.config.js
  devServer: {  //开启代理服务器
    proxy:{
      "/api": {  // /api是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会走到代理来。
          target: "http://www.aaabbbccc.com", // 需要代理的域名，目标域名，会替换掉匹配字段之前的路径
           ws: false, // 是否启用websockets
          changeOrigin: true, //是否跨域
          pathRewrite: {  //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
              "^/api": ""
          }
      },
   
  },
  }
 
  //vue cli2 .0 的放在 config文件夹中的index.js  中
    dev: {
    proxyTable:{
      "/api": {
          target: "http://www.aaabbbccc.com", // 需要代理的域名
           ws: false, // 是否启用websockets
          changeOrigin: true, //开启跨域
          pathRewrite: {  //重写请求路径上匹配到的字段，如果不需要在请求路径上，重写为""
              "^/api": ""，
             
          }
      },
  },
  }

2.JSONP跨域

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

jquery Ajax实现：

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

Vue axios实现：

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

 3.nginx反向代理接口跨域

 4.WebSocket协议跨域