问题由来:

在公司遇到一个线上bug,如下

var url = 'http://106.75.31.215:8012/onlinePreview?url=' + encodeURIComponent(fileUrl);

window.open(url, "_blank", "height=" + winHeight
+ ",top=80,left=80,toolbar=no, menubar=no, scrollbars=yes, resizable=yes");

由于 fileUrl 是多张图片的 url 拼装而来,在这里我们使用get请求方式调的后台图片预览接口,发现后台报错 请求头过长。

特此查了下

在IE8 下的URL地址总长度为:4076,超过该长度会自动忽略后面的内容;

在firefox 25下的URL地址总长度可以达到:7530,超过该长度会访问错误;

在chrome 29.0.1547.62 的最大总长度达到:7675,超过该长度会访问错误;

尴尬。。。我们这有一万多的字符。

解决思路:

换post请求啊,不能忍啊,因为post请求理论上没有请求数据的长度限制,但是没这么搞过啊。

解决方案:

好像以前只在form表单里接触过post调用,那么能不能让window.open()先打开一个隐藏的form表单呢?然后把请求数据塞进去,而偷偷的自动提交,不久可以了么。机智啊

实施如下:

var winHeight = window.document.documentElement.clientHeight-10;
var url = 'http://106.75.31.215:8012/picturesPreview';
var formStr = '<form style="visibility:hidden;" method="POST" action="' + url + '">' +
'<input type="hidden" name="urls" value="' + encodeURIComponent(urls) + '" />' +
'<input type="hidden" name="currentUrl" value="' + encodeURIComponent(fileUrl) + '" />'+
'</form>';
var win = window.open("", "_blank", "height=" + winHeight
+ ",top=80,left=80,toolbar=no, menubar=no, scrollbars=yes, resizable=yes");
win.document.body.innerHTML = formStr;
win.document.forms[0].submit();

经测试,可以跑通,完美解决。

如何让window.open()以post请求方式调用(巧妙解法)的更多相关文章

  1. 利用Ajax改变发送请求方式

    由于测试的时候需要模拟Head请求,解决办法:先访问要请求的站点,然后在浏览器的控制台下执行如下代码,请求方式就为参数给的值: var xmlHttp; if (window.ActiveXObjec ...

  2. AJAX中的请求方式以及同步异步的区别

    AJAX中的请求方式以及同步异步的区别请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用wind ...

  3. Android之Http通信——3.Android HTTP请求方式:HttpURLConnection

    3.Android HTTP请求方式之HttpURLConnection 引言: 好了,前两节我们已经对HTTP协议进行了学习.相信看完前两节的朋友对HTTP协议相比之前 应该更加熟悉吧.好吧.学了要 ...

  4. 使用Cors在WebApi中实现跨域请求,请求方式为angular的 $http.jsonp

    使用Cors在WebApi中实现跨域请求 第一步,在webapi项目中安装cors 在Web API配置文件中(Global.asax)进行全局配置: public class WebApiAppli ...

  5. 深入理解ajax系列第二篇——请求方式

    前面的话 在上一篇中,概要地介绍了XHR对象的使用.本文将详细介绍使用XHR对象发送请求的两种方式——GET和POST.下面将以实例的形式来详细说明 GET GET是最常见的请求类型,最常用于向服务器 ...

  6. 限制action所接受的请求方式或请求参数

    原文:http://www.cnblogs.com/liukemng/p/3726897.html 2.限制action所接受的请求方式(get或post): 之前我们在HelloWorldContr ...

  7. Android——JDK的get请求方式

    layout文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  8. 第二节(RequestMapping请求方式)学习尚硅谷-springmvc视频教程

    项目中,创建测试类SpringMVCTest @Controller @RequestMapping("/springmvc1") public class SpringMVCTe ...

  9. jQuery中ajax的4种常用请求方式

    jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...

随机推荐

  1. POJ 3128 Leonardo's Notebook [置换群]

    传送门 题意:26个大写字母的置换$B$,是否存在置换$A$满足$A^2=B$ $A^2$,就是在循环中一下子走两步 容易发现,长度$n$为奇数的循环走两步还是$n$次回到原点 $n$为偶数的话是$\ ...

  2. Windows Azure Platform Introduction (14) 申请海外的Windows Azure账户

    <Windows Azure Platform 系列文章目录> 本文的最后更新时间为:2017-12-27 本文介绍国内用户,注册和使用海外Azure账户. 前提: 1.需要一个有效的Wi ...

  3. u-boot核心初始化

    异常向量表:异常:因为内部或者外部的一些事件,导致处理器停下正在处理的工作,转而去处理这些发生的事件.ARM Architecture Reference Manual p54页.7种异常的类型:Re ...

  4. [Python Study Notes]Socket模拟ssh执行cmd并记录遇到的问题

    服务器端: 流程: 1.创建servert实例 2.绑定地址和端口 3.开始监听 4.创建客户端连接实例 5.等待客户端的消息 6.......... # The_author = 'liu66' # ...

  5. 浅学vue

    因之前项目接触了vue,从此我被迷住,简洁而不失优雅,小巧而不乏大匠. 首先我们要了解vue,什么是vue,正如官网所说:Vue.js 是一套构建用户界面的渐进式框架,Vue 的核心库只关注视图层.V ...

  6. markdown的流程图、时序图、甘特图画法

    https://www.jianshu.com/p/a9ff5a9cdb25 Markdown里面的序列图 https://shd101wyy.github.io/markdown-preview-e ...

  7. APACHE服务器出现No input file specified.解决方案

    thinkcmf程序默认的.htaccess里面的规则: <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_F ...

  8. [NOIP]2016天天爱跑步

    [NOIP]2016天天爱跑步 标签: LCA 树上差分 NOIP Description 小C同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是 ...

  9. Js中的subStr和subString的区别

    /** * Created by lonecloud on 16/9/8. */ var str="HelloWorld"; /** * 这里的两个参数第一个是从0到第几个开始第二 ...

  10. 【阿里聚安全·安全周刊】科学家警告外星恶意代码|新方法任意解锁iPhone

    本周的七个关键词: 外星恶意代码 丨 任意解锁iPhone 丨  安卓9.0 丨 黑客攻击医疗设备 丨 仙女座僵尸网络 丨  苹果联合创始人被骗比特币 丨JavaScript -1-   [恶意代码] ...