php跨域请求解决方案_解决跨域soeasy

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

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

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