jquery中ajax跨域設定http header
阿新 • • 發佈:2018-12-02
本文從以下幾種情況討論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/