前端跨域问题和解决方法

1 为什么会出现跨域？

由于浏览器的同域策略的限制，也是为了安全起见，防止浏览器的正常功能可能会受到影响，
同源策略会阻止一个js脚本和另一个域的内容进行相互补充。

2、什么是跨域？
当一个请求url的协议（protocol），主机（host）和端口号（port）三者之间任意一个与当前页面的url不同就是跨域。

3、解决跨域的方法：
【1】设置document.domain解决无法读取非同源网页的Cookie问题
【2】跨文档通信API：window.postMessage()
【3】JSONP
【4】CORS
【5】Proxy设置代理

常用的两种各跨域方式：CORS、Proxy
1 项目一般都使用脚手架，即使用webpack，可以使用webpack自带的proxy忒像那个来处理跨域：
配置文件：webpack.config.js
项目入口：
entry:./src/index.js
打包输出目录:dist
使用proxy处理跨域，即前端所有的请求都会自动跳转到target指定的url
proxy配置：（可以配置多个）

  proxy: {
    '/server/api/': {
      // target: 'http://172.20.26.70:8050/', //本地
      // target: 'http://192.168.1.125:8050/', //测试
      target: 'http://192.168.1.126:8050/', //测试
      changeOrigin: true,
      pathRewrite: { '^/server/api/': '' },
    },
    '/server/easyMock/': {
      target: 'http://192.168.1.60:7300/mock/5cd53c536c54c94765696c98/', //测试
      changeOrigin: true,
      pathRewrite: { '^/server/easyMock/': '' },
    },
  },

此方式是项目中最常用的，但是打包之后就有问题了，因为打包后就不存在proxy了，
跨域还是会存在，该如何解决？

2、使用CROS解决跨域
此种方式是在后端配置，配置CROS后，前端无需任何处理就可以访问后天接口了，无论是开发还是部署时都是可以得。

3、JSONP
通常为了解决web服务器的负载，我们把js\css、imsg静态资源分离到另一台独立的服务器上，在html页面中再通过相应的标签从不同的域名下加载静态资源，而被浏览器允许d
，基于这个原理，我们可以通过创建script，再请求一个带参网址实现跨域通信。

1）原生方法实现：

var script = document.createElement('script');
script.type = 'text/javascript';
  // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
  script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
  document.head.appendChild(script);

  //回调执行的函数：
  function handleCallback(res){
      console.log(JSON.stringify(res));
  }

2)vue 实现

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

后台node.js实现

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

jsonp缺点：只能实现get一种请求。

看到一篇写的比较全的跨域解决方案：https://segmentfault.com/a/1190000011145364