跨域的解决方案很多，这里只是举几个小栗子
同源策略如下：
| URL | 说明 | 是否允许通信 |
|---|---|---|
|
http://www.a.com/a.js http://www.a.com/lab/a.js |
同一域名下 | 允许 |
|
http://www.a.com/script/b.js http://www.a.com:3000/a.js |
同一域名下不同文件夹 | 允许 |
|
http://www.a.com/b.js http://www.a.com/a.js |
同一域名，不同端口 | 不允许 |
|
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 不允许 |
|
https://www.a.com/b.js http://www.a.com/a.js |
同一域名，不同协议 | 不允许 |
|
http://javascript.a.com/b.js http://www.a.com/a.js |
主域相同，子域不同 | 不允许 |
JSONP
JSONP包含两部分：回调函数和数据。回调函数是当响应到来时要放在当前页面被调用的函数。数据就是传入回调函数中的json数据，也就是回调函数的参数了。
function Response(response){
console.log('Data: '+response.data);
}
var script = document.createElement('script');
script.src ='[//www.greatytc.com/json/?callback=Response]'
document.body.insertBefore(script, document.body.firstChild);
/*Resonse({"data": "ok"})*/
//当我们通过script标签请求时
//后台就会根据相应的参数(json,Response)
//来生成相应的json数据(handleResponse({"data": "ok"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
注 jsonp虽然很简单，但是有如下缺点：1、请求代码中可能存在安全隐患) 2、很难确定jsonp请求成功与否
动态创建script
script标签不受同源策略的限制。
function loadScript(url, func) {
var head = document.head || document.getElementByTagName('head')[0];
var script = document.createElement('script');
script.src = url;
script.onload = script.onreadystatechange =function(){
if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
func();
script.onload = script.onreadystatechange =null;
}
};
head.insertBefore(script, 0);
}
window.baidu = {
sug: function(data){
console.log(data);
}
};
loadScript('[http://suggestion.baidu.com/su?wd=w](http://suggestion.baidu.com/su?wd=w)',function(){console.log('loaded')});
iframe
iframe已经不建议使用，虽然是解决方案，但时随着前端的飞速发展iframe已经是一个不讨人喜欢的方案了。
设置header头（CORS）
在你要跨域请求的api里，设置header头Access-Control-Allow-Origin，以axios为例
axios({
//设置跨域请求头
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json; charset=UTF-8',
' Access-Control-Allow-Origin': '*'
},
method: "POST",//请求方式
url: "https://solelynet.com/public/index.php/api/v1/UserMenu/GetTree"
data: {
"menu_id":1,
"thirdapp_id":1//请求参数
}
}).then(function(res) {
//返回值
console.log(res.data);
for(var i=0;i<res.data.length;i++){
console.log(res.data[i].name)
}
}) .catch(function(err) {
console.log(err);
});
注：如果是协议和端口造成的跨域问题“前台”是无能为力的
