Ajax跨域请求（二）：解决ajax跨域

方式一：JSONP方式解决跨域问题

jsonp解决跨域问题是一个比较古老的方案(实际中不推荐使用),这里做简单介绍(实际项目中如果要使用JSONP,一般会使用JQ等对JSONP进行了封装的类库来进行ajax请求)

JSONP解决跨域原理如下图：

使用方法：

$.get(url,{
    "name":"qq1234",
    "password" : "123456"
},function(res){
    console.log(res);
},"jsonp");

注意1：一般的JSONP接口和普通接口返回数据是有区别的，所以接口如果要做JSONP兼容，需要进行判断是否有对应callback关键字参数，如果有则是JSONP请求，返回JSONP数据，否则返回普通数据。下面以PHP为例 ：

$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需
if(!empty($callback)){
     return $callback.'('.json_encode($userList).')';
}else{
     return flag(200, "获取成功", $userList);
}

这样做一个if判断，使用时就可以兼容json和jsonp两种方式了。

注意2：基于JSONP的实现原理，JSONP只能用于“GET”请求，不能进行较为复杂的OST请求和其它请求，如何需要POST请求和其它请求，就得参考下面的CORS解决跨域了。

方式二：CORS方式解决跨域问题

第1步、php后台配置允许跨域

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
//主要为跨域CORS配置的两大基本信息,Origin和headers

第2步、配置Apache web服务器跨域（修改httpd.conf文件）

原始代码

<Directory />
    AllowOverride none
    Require all denied
</Directory>

改为以下代码

<Directory />
    Options FollowSymLinks
    AllowOverride none
    Order deny,allow
    Allow from all
</Directory>