浅谈前端跨域问题及解决方案
“跨域”是浏览器出于安全方面考虑作出的限制，如果不在同一域名下访问接口的话就会产生跨域问题；一般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
此外还有以下方法
- nginx反向代理接口跨域
- Nodejs中间件代理跨域
- 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
}
}
