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>