VUE 通过webpack设置proxy 解决跨域问题

1、跨域：浏览器为了保障数据安全做的限制，如果两个页面拥有相同的协议protocol，端口port和主机(域名/ip地址)，那么这两个页面就属于同一个源origin，JavaScript 允许这种同源页面的数据互相通信。(注：www.XXX.com是一个二级域名，而xxx.com俗称为裸域,不同的二级域名也不允许通信)
2、解决跨域的几种方法：1)jsonp-GET请求(url安全性低)
2)iframe

<script type="text/javascript"> 
iframe = document.createElement('iframe');
iframe.style.display = 'none';
var state = 0;
iframe.onload = function() {
if(state === 1) {
var data = JSON.parse(iframe.contentWindow.name);
console.log(data);
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
} else if(state === 0) {
state = 1;
iframe.contentWindow.location = 'http://localhost:81/cross-domain/proxy.html';//指向自己根目录下的空文件
}
};
iframe.src = 'http://localhost:8080/data.php';//要请求的不同源数据
document.body.appendChild(iframe);

3)最常用的是采用代理
3、配置webpack将接口代理到本地

//   '/api'为匹配项，我们匹配项写'/api'，那么当我们npm run dev把本地服务跑起来后localhost:8080/api/file就是我们的代理地址
module.exports = {
devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    hot: true,         // 默认热更新
    open: false,    // 默认不打开之前的文件
    proxy: {           // 设置代理
      '/api': {
        target: `http://baidu.com/`,    // 实际请求的第三方接口
        changeOrigin: true,              // 接口跨域
  //      secure:true,                       // 如果目标请求地址是https则需要加这个参数
        pathRewrite: {'^/api': ''},       // 重写地址
      },
    }
  },
}
// 修改配置后需要 ctrl + c停止之前的服务再 npm run dev 重启服务即可
// 很重要的配置:  IP / 域名的映射关系 ---hosts文件
hosts文件位置：win:C:\Windows\System32\drivers\etc mac:/etc/hosts
// 内网ip地址     内网域名
   127.0.0.1       localhost
   127.0.0.1       me.csdn.net
   1**.**.**.*4     in-open.com