这个问题其实刚入行的时候就碰到了,后来就在接口返回数据返回的函数里加了一行代码:
header("Access-Control-Allow-Origin: *");
一直想总结一下这个让很多新手困扰的跨域问题,现在来说一说。
首先,跨域产生的原因大家可以自行百度。
本地测试从http://localhost
向http://192.168.50.88
域请求数据。
测试代码:
前台代码:
$.get('http://192.168.50.88/tp_test/Home/Test/test_jsonp', function(data) {
console.log(data);
});
后台代码:
public function test_jsonp(){
data = json_encode(array(
'uid'=>5465,
'nick'=>'刘德华1265'
));
echodata;
}
在不做任何处理的情况下浏览器会提示跨域权限问题的,无法获取到数据。
Failed to load http://192.168.50.88/tp_test/Home/Test/test_jsonp: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access
解决方案
方案一:JSONP
这个方案虽然很古老,但依然有效,对于小型的GET请求任务还是可以胜任的,原理很取巧,理解它还是很有必要的;
他的原理就是,通过向页面添加<script></script>
标签,加载接口,后台接口按照约定好的将数据放到接口中获取到的callback函数中,前台通过这个函数运行来获取到数据。
代码修改如下:
前台代码:
// callback函数叫jsonp_callback
(document).ready(function() {
CreateScript('http://192.168.50.88/tp_test/Home/Test/test_jsonp?callback=jsonp_callback');
});
// callback函数jsonp_callback
function jsonp_callback(data){
console.log(data);
}
// 添加script标签
function CreateScript(src){("<script><//script>").attr("src", src).appendTo("body");
}
后台代码:
public function test_jsonp(){
callback =_GET['callback'];
data = json_encode(array(
'uid'=>5465,
'nick'=>'刘德华1265'
));
echo "{callback}({$data})";
}
可以看到,已经可以正确的将数据获取到了,这也就是JSONP
的实现过程,由于这样的实现原理,导致了JSONP
的两个问题:
1. 需要后台配合返回约定格式的数据。
2. JSONP
只能发送GET请求。
而在使用Jquery
封装好的jsonp
请求时,就会更加方便一些了,同样的后端代码,前端代码就可以做简化了:
$.ajax({
url: 'http://192.168.50.88/tp_test/index.php/Home/Test/test_jsonp',
dataType: 'jsonp',
jsonp:'callback',
})
.done(function(data) {
console.log(data);
})
Jquery
的封装帮我们完成了所有前台需要完成的工作,只需要后台将数据放到callback中返回就可以了。
由于JSONP
只能发送GET
请求,其他的场景就需要第二种方案;
方案二:HTTP访问控制(CORS)
CORS
是一个W3C
标准,全称是”跨域资源共享”Cross-origin resource sharing
。它允许浏览器向跨源服务器,发出XMLHttpRequest
请求,从而克服了AJAX
只能同源使用的限制。
CORS
与JSONP
的使用目的相同,但是比JSONP
更强大。JSONP
只支持GET
请求,CORS
支持所有类型的HTTP
请求。JSONP
的优势在于支持老式浏览器,以及可以向不支持CORS
的网站请求数据。
CORS
的用法很简单:我们只需要的被请求的接口的回复头中添加:
// 星号表示所有的域都可以请求这里的数据
Access-Control-Allow-Origin: *
//或者指定域,例如上面的测试中我们需要加入即可正常得到数据了
Access-Control-Allow-Origin: http://localhost
关于CORS
更多的设置和用法请自行搜索。
原文链接:https://beltxman.com/1824.html,若无特殊说明本站内容为 行星带 原创,未经同意禁止转载。
本站已开通投稿,欢迎博主!