AJAX请求跨域问题的解决方案

这个问题其实刚入行的时候就碰到了，后来就在接口返回数据返回的函数里加了一行代码：

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'
    ));
    echo $data;
}

在不做任何处理的情况下浏览器会提示跨域权限问题的，无法获取到数据。

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 更多的设置和用法请自行搜索。