如何实现跨域!

前言:

这里说的js跨域是指通过js在不同的域(服务器)之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。

要解决跨域的问题,我们可以使用以下几种方法:

一、通过原生js实现jsonp跨域:

实现原理:

1、后台不是直接返回数据,而是返回一个函数,同时这个函数传入要返回的数据。

2、前端利用script的src形式(<script src="http://xxx/tp5/public?callback=dosomething"></script>)请求接口并传入callback=dosomething(可以自定义)。(替代ajax的做法)

代码如下:
后台:
 public function index()
    {
        $callback = $_GET['callback'];   
        $data = array(
            'a'=>123,
            'b'=>456
        );
        return $callback.'('.json_encode($data).')';
    }

前端:

特别注意下面的先后顺序,必须先定义dosomething,然后通过src的形式来进行调用接口。

<script>
        function dosomething(res) {
            console.log(res);
        }
</script>
<script src="http://xxxx/tp5/public?callback=dosomething"></script>

二、通过Jquery来实现jsonp跨域!(项目中推荐使用这个!!!)

实现原理同上!但是更简单!后台代码不变,还是返回一个函数,函数里面传入要返回的数据!

前端代码如下:

和一般的ajax请求一样,就是多了一句  dataType:"jsonp"!

<script>
        $.ajax({
            url: 'http://118.24.176.74/tp5/public',
            dataType:"jsonp",
            success: function (res) {
                console.log(res)
            }
        });
 </script>

小结:

1、首先弄明白跨域原理,其次项目中推荐使用Jquery来进行跨域!

2、前端的话,加一句即可dataType:"jsonp"; 

3、后台需要改变三处    (1)$callback = $_GET['callback'];  (2) return $callback.'('.json_encode($data).')' (3)把post请求改为get请求!;

 -------------------------------------------------------------------------------------------------------------------------------------------------------补充-------------------------------------------------------------------------------------------------------------------

php返回数据,可以调用以下函数来实现灵活切换为返回格式。

function api_jsonp_encode($json)
    {
        if (!empty($_GET['callbak'])) {
            return $_GET['callbak'] . '(' . $json . ')'; // jsonp
        }
        return $json; // json
    }

特别注意:如果采用jsonp跨域请求,则请求方式默认就是get ,因此后台的代码也得改为get式的获取数据!

后台解决跨域:

php中:

header('Access-Control-Allow-Origin: *');
注意:这个在php非框架中可以用,但是在tp5等框架中有问题,需要用行为或者中间件来操作!
原文地址:https://www.cnblogs.com/teamemory/p/9828895.html