Vue跨域问题的解决

出现跨域的原因

请求接口时，控制台提示：Access-Control-Allow-Origin，说明请求跨域了

为了安全考虑，一个源的脚本（网页，网站）不能与另一个源的资源进行交互，所以就引发一个词叫做“同源策略”。
同源策略：同源策略是一种约定，它是浏览器最核心的也最基本的安全功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。
同源：所谓同源（即指在同一个域），就是两个页面具有相同的协议（protocol）,主机（host）和端口号（port）
当协议，主机，和端口号有一个不同时，就是跨域。

跨域产生的限制

1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

2. 无法接触非同源网页的 DOM

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

解决跨域的方案

1. CORS跨域 （前端不用动，后端设置Access-Control-Allow-Origin等）

• 服务端进行接口请求设置，前端直接调用
• 说明：后台设置前端某个站点进行访问

2. JSONP

• 前端适配，后端配合
• 前后端同时改造
  缺点是只支持get请求，不支持post请求
  jsonp原理：img、srcipt，link标签的src或href属性不受同源策略限制，可以用来作为请求，后端接受请求后返回一个回调函数callback，调用前端已经定义好的函数，从而实现跨域请求，如：
  通过 script 标签

<script src="http://www.get.com/get?callback=back"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字

// 处理服务器返回回调函数的数据
<script type="text/javascript">
    // 服务器返回的数据会放到回调函数里面
    function back(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

通过JQuery 封装的 jsonp

$.ajax({
  url: 'http://www.get.com:1234/getData',
  type: 'get',
  dataType: 'jsonp',  // 请求方式为jsonp
  jsonpCallback: "back",  // 自定义回调函数名
  data : {
  	name:''
  }, 
  success: function(response, status, xhr){
    console.log(response);
  }
})

动态创建 script 标签

$('#btn').click(function () {
    var frame = document.createElement('script');
    frame.src = 'http://www.get.com/get?callback=back';
    $('body').append(frame);
});

// 回调函数，其中res为后端返回的数据
function func(res) {
    alert(res.messag);
}

3. 在vue中使用proxy进行代理。原理是：将域名发送给本地的服务器（启动vue项目的服务，loclahost:8080），再由本地的服务器去请求真正的服务器。

//vue-cli3.0 里面的 vue.config.js 配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://test.com',  //后台接口域名
          ws: true,        //如果要代理 websockets，配置这个参数
          secure: false,  //如果是https接口，需要配置这个参数
          changeOrigin: true,  //是否跨域
          pathRewrite:{  // 重写路径，在浏览器中看到请求的地址： http://localhost:8080/api/get 时，实际上访问的地址：http://test.com/get ，因为重写了 /api
              '^/api': '/'
          }

      }
  }
}