JS 頁面 POST 傳遞參數跳轉到新頁面

場景

有個頁面 a.vm，對 ajax 請求的結果進行判斷後，獲取結果裏面的數據傳遞給一個 URL（b.htm），跳轉到新的頁面 b.htm。

遇到的問題

1. 由於一開始是 GET 請求，因此當傳遞的數據過大的時候，會報錯 nginx 414 request-uri too long

   • 客戶端請求頭緩衝區大小，若是請求頭總長度大於小於128k，則使用此緩衝區

client_header_buffer_size 128k;

• 請求頭總長度大於128k時使用 large_client_header_buffers 設置的緩存區

• large_client_header_buffers 指令參數4爲個數，128k爲大小，默認是8k。申請4個128k。

large_client_header_buffers 4 128k;

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

形成這樣的緣由

1. cookie中寫入的值太大形成的，由於header中的其餘參數的size通常比較固定，只有cookie可能被寫入較大的數據

2. 請求參數太長，好比發佈一個文章正文，用urlencode後，使用get方式傳到後臺

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

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

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

臨時解決辦法

修改 nginx 參數

主要是調大如下參數值：

client_header_buffer_size 512k;
large_client_header_buffers 4 512k;

可是調大這個值會出現一個問題，當個人服務器騰挪數據量比較大的時候，可能又要修改這樣不是一個辦法，最終的解決辦法就是由 GET 請求方式修改成 POST 請求方式

最終解決辦法

使用 jquery.redirect.js 框架來處理這樣的狀況，主要使用到的函數是 $.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;
            });