浅谈前端跨域问题及解决方案

“跨域”是浏览器出于安全方面考虑作出的限制，如果不在同一域名下访问接口的话就会产生跨域问题；一般ajax请求如果因为跨域问题报错的话，一般会有以下提示：

post request is No 'Access-Control-Allow-Origin' header is present on the requested resource.'

如果看到上面的报错，那你肯定是跨域访问了。

其实解决办法也很简单，统一域名就可以了，现在由于一些前后端分离的方案无法统一域名，其实最好的办法还是在服务端做手脚，加上以下header

> header("Access-Control-Allow-Origin:*");

前端即可直接获取到数据。

这又叫做跨域资源共享（CORS）

如果这种办法也不能用的话，就只能在前端采取一些手段去实现跨域了，目前主流的跨域方法有以下几种

jsonp

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

但是有个缺点，只能实现get一种请求。

1) 原生实现

<script> 
  var script = document.createElement('script'); 
  script.type = 'text/javascript'; // 传参并指定回调执行函数为onBack 
  script.src = 'http://data/login?user=admin&callback=onBack'; // 接口地址

  document.head.appendChild(script); // 回调执行函数

  function onBack(res) {
    alert(JSON.stringify(res)); 
  }
 </script>

服务端返回如下（返回时即执行全局函数）：

onBack({"status": true, "user": "admin"})

2）JQuery

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

3) vue.js

this.$http.jsonp('http://data/login', { 
  params: {}, 
  jsonp: 'onBack'
  }).then((res) => {
   console.log(res);
  })

另外还有个jsonp库可用，方法如下

import jsonp from 'jsonp'
jsonp(url, options, (err, data) => {
  if (!err) {
    resolve(data)
  } else {
    reject(err)
  }
}

---

document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。
实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
1.）父窗口：(http://www.domain.com/a.html))

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script> 
document.domain = 'domain.com';
 var user = 'admin';
</script>

2.）子窗口：([http://child.domain.com/b.html)

<script> 
document.domain = 'domain.com'; // 获取父窗口中变量 
alert('get js data from parent ---> ' + window.parent.user);
</script>

location.hash + iframe

实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

1.）a.html：http://www.domain1.com/a.html

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script> 
  var iframe = document.getElementById('iframe'); 
    // 向b.html传hash值 setTimeout(function() {
    iframe.src = iframe.src + '#user=admin'; 
  }, 1000); 
  // 开放给同域c.html的回调方法 
  function onCallback(res) { 
    alert('data from c.html ---> ' + res); 
  }
</script>

2.）b.html：http://www.domain2.com/b.html

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe><script> 
  var iframe = document.getElementById('iframe'); 
  // 监听a.html传来的hash值，再传给c.html
  window.onhashchange = function () {
    iframe.src = iframe.src + location.hash; 
  };
</script>

3.）c.html：(http://www.domain1.com/c.html))

<script> 
// 监听b.html传来的hash值
 window.onhashchange = function () {
 // 再通过操作同域a.html的js回调，将结果传回 window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', '')); 
};
</script>

more

此外还有以下方法

1. nginx反向代理接口跨域
2. Nodejs中间件代理跨域
3. WebSocket协议跨域

ps:
另外值得一提的是vue-cli + webpack也可通过配置实现1次跨域，不过仅限开发环境，在项目上线前由于某些限制不能做到同域的时候，采用这种方式是很灵活的
在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。

module.exports = { 
  entry: {},
  module: {}, 
  ... 
  devServer: { 
    historyApiFallback: true,
    proxy: [{
      context: '/login', 
      target: 'http://www.domain2.com:8080', // 代理跨域目标接口 
      changeOrigin: true, 
      cookieDomainRewrite: 'www.domain1.com' // 可以为false，表示不修改
    }], 
    noInfo: true 
  }
}

参考文章 https://www.jianshu.com/p/ad799a7801e1