在Js頁面通過POST傳遞參數(shù)跳轉(zhuǎn)到新頁面詳解

場景

最近在工作中遇到一個需求，有個頁面 a.vm，對 ajax 請求的結(jié)果進(jìn)行判斷后，獲取結(jié)果里面的數(shù)據(jù)傳遞給一個 URL（b.htm），跳轉(zhuǎn)到新的頁面 b.htm。

遇到的問題

因?yàn)橐婚_始是 GET 請求，所以當(dāng)傳遞的數(shù)據(jù)過大的時候，會報錯 nginx 414 request-uri too long

客戶端請求頭緩沖區(qū)大小，如果請求頭總長度大于小于128k，則使用此緩沖區(qū)

client_header_buffer_size 128k;

請求頭總長度大于128k時使用 large_client_header_buffers 設(shè)置的緩存區(qū)

large_client_header_buffers 指令參數(shù)4為個數(shù)，128k為大小，默認(rèn)是8k。申請4個128k。

large_client_header_buffers 4 128k;

當(dāng)http 的URI太長或者request header過大時會報414 Request URI too large或400 bad request錯誤

造成這樣的原因

cookie中寫入的值太大造成的，因?yàn)閔eader中的其他參數(shù)的size一般比較固定，只有cookie可能被寫入較大的數(shù)據(jù)

請求參數(shù)太長，比如發(fā)布一個文章正文，用urlencode后，使用get方式傳到后臺

本次的故障原因是由問題 2 引起的。即當(dāng)請求頭過大時，超過 large_client_header_buffer 時，nginx可能返回 Request URI too large (414) 或者 Bad-request(400) 錯誤。

當(dāng)Request line的長度大于large_client_header_buffer的一個buffer(128k)時，nginx會返回"Request URI too large" (414)錯誤，對應(yīng)上面的場景2。

請求頭中最長的一行也要小于large_client_header_buffer，當(dāng)不是Request line的最長行大于一個buffer(128k)時，會返回"Bad-request"(400)錯誤，對應(yīng)上面的場景1。

臨時解決辦法

修改 nginx 參數(shù)

主要是調(diào)大以下參數(shù)值：

client_header_buffer_size 512k;
large_client_header_buffers 4 512k;

但是調(diào)大這個值會出現(xiàn)一個問題，當(dāng)我的服務(wù)器騰挪數(shù)據(jù)量比較大的時候，可能又要修改這樣不是一個辦法，最終的解決辦法就是由 GET 請求方式修改為 POST 請求方式

最終解決辦法

使用 jquery.redirect.js 框架來處理這樣的情況，主要使用到的函數(shù)是 $.redirect

代碼如下：

 $http({
    method: "POST",
    dataType: "json",
    contentType: 'application/json',
    url: url,
    data: data,
   }).success(function (data) {
    if (data.success) {
     crId = data.data;
     $scope.errMsg = "";
     var url = "/xx.htm?id=" + id;
     window.location.href = url
    } else {
     $scope.errMsg = data.message;
     $scope.isDisabled = false;
     $scope.errorCode = data.code;
     $scope.trv.physics = data.data;
     if(data.statusCode === -224){
      var vms = data.data;
      console.log("vms: " + vms);

      $.redirect('/b.htm', {'vms': vms.toString(), 'resource': trv.resource, 'errMsg': $scope.errMsg});
     }

    }
   }).error(function (data) {
    alert(data);
    $scope.isDisabled = false;
   });

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。