JS跨域处理的几种方案（简单介绍）

作者: 兴趣使然的土豆 | 来源:发表于2019-11-04 09:52 被阅读0次

JS跨域处理的几种方案（简单介绍）
web跨域解决方案
Webpack 配置 proxy 代理解决跨域问题
「深入浅出」前端开发中常用的几种跨域解决方案
跨域问题详解分析
关于跨域以及解决思路
跨域
几种跨域方案
webpack设置代理出现的问题
关于设置env等环境变量的思考

跨域的解决方案很多，这里只是举几个小栗子

同源策略如下：

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 ='[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请求成功与否

动态创建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);
   });

注：如果是协议和端口造成的跨域问题“前台”是无能为力的