在Js頁面通過POST傳遞參數(shù)跳轉(zhuǎn)到新頁面詳解
場景
最近在工作中遇到一個(gè)需求,有個(gè)頁面 a.vm,對(duì) ajax 請(qǐng)求的結(jié)果進(jìn)行判斷后,獲取結(jié)果里面的數(shù)據(jù)傳遞給一個(gè) URL(b.htm),跳轉(zhuǎn)到新的頁面 b.htm。
遇到的問題
因?yàn)橐婚_始是 GET 請(qǐng)求,所以當(dāng)傳遞的數(shù)據(jù)過大的時(shí)候,會(huì)報(bào)錯(cuò) nginx 414 request-uri too long
客戶端請(qǐng)求頭緩沖區(qū)大小,如果請(qǐng)求頭總長度大于小于128k,則使用此緩沖區(qū)
client_header_buffer_size 128k;
請(qǐng)求頭總長度大于128k時(shí)使用 large_client_header_buffers 設(shè)置的緩存區(qū)
large_client_header_buffers 指令參數(shù)4為個(gè)數(shù),128k為大小,默認(rèn)是8k。申請(qǐng)4個(gè)128k。
large_client_header_buffers 4 128k;
當(dāng)http 的URI太長或者request header過大時(shí)會(huì)報(bào)414 Request URI too large或400 bad request錯(cuò)誤
造成這樣的原因
cookie中寫入的值太大造成的,因?yàn)閔eader中的其他參數(shù)的size一般比較固定,只有cookie可能被寫入較大的數(shù)據(jù)
請(qǐng)求參數(shù)太長,比如發(fā)布一個(gè)文章正文,用urlencode后,使用get方式傳到后臺(tái)
本次的故障原因是由問題 2 引起的。即當(dāng)請(qǐng)求頭過大時(shí),超過 large_client_header_buffer 時(shí),nginx可能返回 Request URI too large (414) 或者 Bad-request(400) 錯(cuò)誤。
當(dāng)Request line的長度大于large_client_header_buffer的一個(gè)buffer(128k)時(shí),nginx會(huì)返回"Request URI too large" (414)錯(cuò)誤,對(duì)應(yīng)上面的場景2。
請(qǐng)求頭中最長的一行也要小于large_client_header_buffer,當(dāng)不是Request line的最長行大于一個(gè)buffer(128k)時(shí),會(huì)返回"Bad-request"(400)錯(cuò)誤,對(duì)應(yīng)上面的場景1。
臨時(shí)解決辦法
修改 nginx 參數(shù)
主要是調(diào)大以下參數(shù)值:
client_header_buffer_size 512k; large_client_header_buffers 4 512k;
但是調(diào)大這個(gè)值會(huì)出現(xiàn)一個(gè)問題,當(dāng)我的服務(wù)器騰挪數(shù)據(jù)量比較大的時(shí)候,可能又要修改這樣不是一個(gè)辦法,最終的解決辦法就是由 GET 請(qǐng)求方式修改為 POST 請(qǐng)求方式
最終解決辦法
使用 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)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
JS實(shí)現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài)
在一些網(wǎng)站上我們經(jīng)??吹浇换バ院軓?qiáng)的功能。一些用戶資料可以直接雙擊出現(xiàn)文本框,并在此輸入新的資料即可修改,無需再按確定按鈕等。怎么實(shí)現(xiàn)的呢?今天小編給大家分享JS實(shí)現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài),需要的的朋友參考下2017-03-03
JavaScript實(shí)現(xiàn)動(dòng)態(tài)加載刪除表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)加載刪除表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
利用javascript移動(dòng)div層-javascript 拖動(dòng)層
利用javascript開發(fā)在界面上隨意拖動(dòng)以下html code中的div層2009-03-03
微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果(非swiper)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果,非swiper,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
JavaScript使用indexOf獲得子字符串在字符串中位置的方法
這篇文章主要介紹了JavaScript使用indexOf獲得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以參考下2015-04-04
Electron實(shí)現(xiàn)右鍵保存圖片到本地功能
Electron是開發(fā)跨平臺(tái)pc客戶端的利器,最近在使用它時(shí)遇到一個(gè)需要右鍵保存頁面中圖片的功能,Electron雖使用了Chromium內(nèi)核但卻無法直接使用系統(tǒng)右鍵,需要自定義右鍵菜單,然后添加圖片保存功能,以下是我的使用方法,需要的朋友可以參考下2024-07-07
如何用threejs實(shí)現(xiàn)實(shí)時(shí)多邊形折射
這篇文章主要介紹了如何用threejs實(shí)現(xiàn)實(shí)時(shí)多邊形折射,對(duì)three.js庫感興趣的同學(xué),可以參考下2021-05-05

