在Js页面通过POST传递参数跳转到新页面详解
场景
最近在工作中遇到一个需求,有个页面 a.vm,对 ajax 请求的结果进行判断后,获取结果里面的数据传递给一个 URL(b.htm),跳转到新的页面 b.htm。
遇到的问题
因为一开始是 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
错误
造成这样的原因
cookie中写入的值太大造成的,因为header中的其他参数的size一般比较固定,只有cookie可能被写入较大的数据
请求参数太长,比如发布一个文章正文,用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; });
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- python接口自动化5-Json数据处理
- Numpy教程第1部分 - 阵列简介(常用基础操作总结)
- Session和Cookies的基本原理
- 浅析Numpy.genfromtxt及File I/O讲解
- 损失函数详解
- 排查Java的内存问题
- 使用两种方法让 ASP.NET Core 实现遵循 HATEOAS 结构的 RESTful API
- 设计模式六大原则(5):迪米特法则
- Selenium2+python自动化61-Chrome浏览器(chromedriver)
- 区块链可以减少社会不平等吗?
- 【干货】不止准确率:为分类任务选择正确的机器学习度量指标(附代码实现)
- python爬虫beautifulsoup4系列1
- 区块链入门教程
- python爬虫beautifulsoup4系列2
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python爬虫练手,一个简单的Python资讯采集案例
- 直播带货软件开发过程中,如何实现图片上传
- 太实用了!自己动手写软件——邮件用户名密码验证
- 太实用了!自己动手写软件——SSH、FTP和SQL server的密码破解
- Kaggle Tweet Sentiment Extraction 第七名复盘
- 【翻译】.NET 5中的性能改进
- 腾讯云实时语音识别-iOS SDK
- JointPoint用法及与ProceedingJoinPoint 的关系
- Spring中的异步请求、异步调用及demo测试
- 以太坊交易签名解析源码解读
- 比较NaN和数字
- GO 的方法集
- 轻松应对并发问题,简易的火车票售票系统,第一步 —业务分析
- 【Spark Operator】核数设置Cores/Cores Limit/Cores Request,你搞清楚没有?
- 【Ceph RGW】radosgw_usage_exporter监控用户使用量