跨域的解决方案很多，这里只是举几个小栗子
1、同源策略如下：
2、JSONP：
JSONP包含两部分：回调函数和数据。回调函数是当响应到来时要放在当前页面被调用的函数。数据就是传入回调函数中的json数据，也就是回调函数的参数了。
function Response(response) { console.log("Data: " + response.data); } var script = document.createElement("script"); script.src = "[http://www.jianshu.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请求成功与否
3、动态创建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"); } );
4、Iframe：
iframe已经不建议使用，虽然是解决方案，但是随着前端的飞速发展iframe已经是一个不讨人喜欢的方案了。
5、设置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
注：如果是协议和端口造成的跨域问题"前台"是无能为力的