前言:
这里说的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中: