1. 程式人生 > >jquery中ajax跨域設定http header

jquery中ajax跨域設定http header

本文從以下幾種情況討論ajax請求:
沒有跨域,設定http header頭部(例如authorization);
跨域,沒有設定http header頭部;
跨域,設定http header頭部;
題外,php傳送http請求,並設定http header頭部;
Jsonp個人理解,參考
一.ajax請求,沒有跨域,設定http header頭部

$.ajax({

    type: "post",

    url:"http://abc.cc/qrcode3/index.php/home/index/testpost",

    dataType: "json"

    data: {"key":"value"},

    // headers : {'Authorization':'Basic bmVvd2F5Oe4lb3dheQ=='},

    beforeSend: function(xhr) {

        xhr.setRequestHeader("Authorization", "Basic bmVvd2F5Oe4lb3dheQ==");

    },

    success: function(data){ alert(data); },

    error: function(data){ alert("error"); } ,

});

設定header頭部有兩種方法:
1.headers : {‘Authorization’:’Basic bmVvd2F5Oe4lb3dheQ==’}

多個頭部用逗號‘,’分隔開
2.定義beforeSend方法
beforeSend: function(xhr) {
xhr.setRequestHeader(“Authorization”, “Basic bmVvd2F5Oe4lb3dheQ==”);
}


二.ajax跨域請求,沒有設定http header,

$.ajax({

    type: "post",

    url:"http://abc.cc/qrcode3/index.php/home/index/testpost",

    dataType: "jsonp"

    data: {"key":"value"},

    // headers : {'Authorization':'Basic bmVvd2F5Oe4lb3dheQ=='},

    success: function(data){ alert(data); },

    error: function(data){ alert("error"); } ,

});

伺服器端程式碼:

public function testpost() {

    $data = $_GET['key']?$_GET['key']:"123456";

    $callback = $_GET['callback'];

    if(!preg_match("/^[0-9a-zA-Z_.]+$/",$callback)){

exit('引數錯誤!');

    }

    echo $callback.'('.json_encode($data).')';

    exit;

}

跨域ajax訪問,使用jsonp,返回資料格式如:abc({'key':'value','key2':'value2'}),形如一個函式呼叫,引數為一個json資料格式

三.ajax跨域請求,設定header頭部的解決辦法

跨域無法直接設定header,如果跨域了還要設定http頭,可以使用以下方法。

jquery實現程式碼如下:

$(".get_data").click(function() {

    var key = $("#user").val() + ":" + $("#pass").val();

    //base64編碼

    var authKey = base64encode(key);

    $.ajax({

        type: 'GET',

        dataType: 'json',

        url: "http://abc.cc/qrcode3/home/index/testajax",

        headers: {'Authorization': 'Basic '+authKey,"lpy":"lpy"},

        success: function(data) {

            alert(data.msg+"--"+data.user);

        },

        error:function(data){

            alert("error");

        }

    });

});

 

php實現程式碼如下:

public function testajax() {

    // 指定允許其他域名訪問  

    header('Access-Control-Allow-Origin:http://abc.cn');  

    // 響應型別  

    header('Access-Control-Allow-Methods:POST,GET');  

    // 響應頭設定,允許設定Authorization和lpy這兩個http頭

header('Access-Control-Allow-Headers:Authorization,lpy');

 

    //獲取所有的http請求頭

    $header = apache_request_headers();

$data['lpy'] = $header['lpy'];

//獲取authorization中的使用者名稱和密碼,並判斷

    $data['user'] = $_SERVER['PHP_AUTH_USER'];

    $data['pass'] = $_SERVER['PHP_AUTH_PW'];

    if($data['user'] == "neoway" && $data['pass'] == "neoway"){

        $data['msg'] = "ok";

    }else{

        $data['msg'] = "errorjsonp";

    }

echo json_encode($data);

}

總結:
ajax跨域是不能設定http header的,為了能夠設定header,需要在伺服器php程式碼中新增header(‘Access-Control-Allow-Origin:http://abc.cn’); 允許http://abc.cn訪問伺服器abc.cc,再通過設定header(‘Access-Control-Allow-Headers:Authorization,lpy’);把需要設定的http header屬性新增進去,在jquery程式碼中通過header來設定響應的屬性值,在http的請求頭中就可以看到 Authorization和lpy的請求頭,伺服器php端通過$header = apache_request_headers()獲取http header的陣列,繼而可以獲取到lpy的請求頭的值。

四.php傳送http請求,不存在跨域,有設定http header, 示例如下:

$http_url = "http://abc.cc/qrcode3/index.php/home/index/testpost";

$opts = array(

    'http' => array(

    'method' => 'POST',

    'header' => "Content-type:application/json\r\nAuthorization:Basic bmVvd2F5Oe4lb3dheQ==",

    'content' => $encodeString  //body內容,傳遞的引數

    )

);

$context = stream_context_create($opts);

echo  $res = file_get_contents($http_url, false, $context);

設定多個header資訊時,中間的換行使用\r\n
$encodeString為body內容,傳遞的引數

五.jsonp的理解

JSONP請求不是一個真正的Ajax呼叫。它將一個指令碼標籤到您的網頁和瀏覽器然後請求指令碼SRC檔案。生成的指令碼,返回執行和溝通後的結果通過JavaScript執行(呼叫回撥函式),這是為什麼要設定jsonpcallback的原因。因為請求是通過一個指令碼標籤插入而不是直接的Ajax呼叫生成的,是沒有能力去設定請求頭。為了防止被攻擊,對jsonpcallback的值要進行匹配,遮蔽常見特殊字元” <> ()’”;. {}“,以下這些字元,經常會用到xss裡面的,防止xss攻擊。

感興趣的可以看看這幾篇文章,分析京東商城jsonp漏洞(文章比較早):
http://blog.chacuo.net/295.html
http://blog.chacuo.net/304.html
http://blog.chacuo.net/323.html
參考:
http://www.cnblogs.com/aheizi/p/5031516.html
http://kb.cnblogs.com/page/139725/

http://blog.csdn.net/enter89/article/details/51205752



文章內容轉自:http://blog.163.com/pei_jia123/blog/static/230990078201711003348615/