Ajax 跨域問題(JSONP && Access-Control-Allow-Origin)

1.使用jsonp跨域請求
2.經過設置服務端頭部跨域請求
3.設置nginx/apach

使用jsonp跨域請求

什麼是Jsonp

JSONP(JSON with Padding)是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

JSONP的做用

因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源，爲了實現跨域請求，能夠經過script標籤實現跨域請求，而後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。

使用方法

jQuery實現方式

• $.ajax

$.ajax({  
        url:"http://aa.com/get.php?callback=?",   //注意帶callback默認將回調方法名call傳遞後臺
        dataType:'jsonp',  
        data:'',  
        jsonp:'call',  //jsonpCallback就是能夠指定咱們本身的回調方法名call，遠程服務接受callback參數的值就再也不是自動生成的回調名，而是call。dataType是指定按照JSOPN方式訪問遠程服務。
        success:function(data) {  
            console.log(data.value);
        },    
    });

後臺接收代碼

$arr=array('a'=>'A','b'=>'B');
$data=json_encode($arr);      
$callback=isset($_GET['callback'])?$_GET['callback']:'';
echo  $callback."($data)";

PS：JSONP相對簡單，但只支持GET方式調用，不如POST方式安全。
PS：JSONP 服務返回打包在函數調用中的 JSON 響應，而函數調用是由瀏覽器執行的，這使宿主 Web 應用程序更容易受到各種攻擊。若是打算使用 JSONP 服務，瞭解它能形成的威脅很是重要。

經過設置服務端頭部跨域請求

即經過設置 Access-Control-Allow-Origin 來實現跨域。

容許單個域名訪問

只容許接受*http://art.com*端發來的請求，並進行迴應

header('Access-Control-Allow-Origin:http://art.com');

容許多個域名訪問

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';

$allow_origin = array(
'http://art1.com',
'http://art2.com'
);

if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin); 
}

容許全部域名訪問

header('Access-Control-Allow-Origin:*');

不設置類型，默認就是get

post相應模式

<?php  
$ret = array(  
'name' => isset($_POST['name'])? $_POST['name'] : '',  
'age' => isset($_POST['age'])? $_POST['age'] : ''  
);  
header('content-type:application:json;charset=utf8');
//容許權限  
header('Access-Control-Allow-Origin:*');  
//類型
header('Access-Control-Allow-Methods:POST');
// 響應頭設置    
header('Access-Control-Allow-Headers:x-requested-with,content-type');  

echo json_encode($ret);  
?>

設置nginx/apach

方法和第二種相似

//Nginx

http {
  ......
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  ......
}

Apache :

<Directory />
......
Header set Access-Control-Allow-Origin *
</Directory>