后台随时随地为您提供技术支持葡萄又来了。这次发生的事情本来是提供demo是常规操作，但是前两天客户突然报压缩传输模块异常。具体情况是压缩后的内容传输到服务器后无法解压。由于代码没有任何变化，前端相关依赖也没有升级，服务端java版本也没有变化，可以推测是环境问题；进一步仔细检查，经过反复对比，突然发现服务器收到的压缩内容变长了；对比前端请求的内容，发现\r和\n都变成了\r\n.根据以上分析，我们初步判断：问题出在浏览器的翻译上。为了验证猜测是否正确，葡萄将chrome版本回滚到92版本，异常消失，服务器接收到的内容也没有被替换。问题顺利解决，但是ChromePOST数据的内容在传输过程中会发生变化。一向擅长大前端技术的葡萄，绝不认输。为了弄明白其中的原因，我们来看一下POST的详细操作。控制字符首先我们要搞清楚几个控制字符的含义。回车（CR）和换行（LF）是控制字符（controlcharacters）或字节码（bytecode），用于在文本文件中标记换行符。CR=CarriageReturn，回车符号（\r，十六进制ascii码为0x0D，十进制ascii码为13），用于将鼠标移动到行首而不前进到下一行。LF=LineFeed，换行符号（\n，十六进制ascii码为0x0A，十进制ascii码为10）。紧跟在CR和LF（包括CRLF、\r\n或十六进制0x0D0A）之后，将鼠标移动到下一行的开头。（Windows操作系统默认的文本换行符是CRLF；Linux和macOS系统默认使用LF，早期的macos系统使用CR换行。）在代码管理上，CRLF在不同的操作系统下会有很大的不同。下面为大家在不同的系统进行实战演示：MacVisualCode新建文档时，默认是LF，Windows是CRLF，可以选择切换行尾的内容类型顺序。Windows版VisualCodeforMac需要开发者统一CRLF，以避免不同操作系统开发造成的代码管理混乱。POST传输数据的变化搞清楚在不同的系统中，控制字符的原因会有所不同。接下来我们要搞清楚为什么POST的数据在传输过程中发生了变化。我们来写一个简单的Demo测试。先在页面放一个允许换行的textarea，输入带换行的文字，获取内容后只看到\n翻译。通过FormData直接post数据到服务器，然后直接返回，看到所有的\n都变成了\r\n。varuploadData=document.getElementById("ta").valuevarformData=newFormData();formData.append("data",uploadData)fetch("http://localhost:8088/spread/getpdf",{body:formData,method:"POST"}).then(resp=>resp.text())复制代码.then(text=>{console.log(JSON.stringify(text));document.getElementById("result").innerHTML=JSON.stringify(text)})浏览器ID:Mozilla/5.0(Macintosh;IntelMacOSX10_15_7)AppleWebKit/537.36(KHTML,likeGecko)Chrome/99.0.4844.83Safari/537.36将Chrome回滚到92版本，发送与此时收到的文本一致：Mozilla/5.0(Macintosh;IntelMacOSX10_15_7)AppleWebKit/537.36（KHTML，如Gecko）Chrome/92.0.4515.107Safari/537.36深入挖掘原因，我们了解到Internet请求意见Draft2046(RFC2046)4.1.1。明确指出：“任何MIME'text'子类型的规范形式必须始终表示talinebreakasaCRLFsequence.”这里我们可以看到所有的文本类型都必须使用CRLF，而Chrome只是修复了一个“bug”。对于用户来说，用户无法感知CR、LF和CRLF之间的区别，但是当使用场景转换为解压后的文本内容，就变得很重要了。三种解决方案。大家都知道POST是HTTP常用的一种方法，还有一种我们常用的方法就是GET。关于GET和POST的区别就不赘述了这里详细说说使用相关的问题，要解决POTS传输的数据变化问题，最相关的就是Content-Type，首先我们来了解Content-Type和MIME是什么：Content-Type，内容类型，一般指现有的Content-Type用来定义网络文件的类型和网页的编码，决定了浏览器读取这个文件的形式和编码，这经常被看作是一些Asp网页被clickedbutdownloaded.文件或图片的原因关于。POST中常用的内容类型是application/x-www-form-urlencoded、multipart/form-data和application/json。1.application/x-www-form-urlencoded需要将内容提交到表单后，内容会按照name1=value1&name2=value2的方式进行编码，key和value都会进行url转码。对于“\n”和“\r”会被转码为'%0A'和'%0D'，通过这种传输方式，避免浏览器对CRLF的修正可以解决上述问题。但是这种转码会增加文本的长度，原来的1个字符变成了3个，结果就是压缩后的文本变长了2.当multipart/form-data需要向服务器提交文件时，就需要用到这个方法.在前面的代码中，我们可以看到当formData为普通文本时，会进行修正。为了解决这种情况，我们可以将字符串内容EncapsulatedintoBlob改成文件流来避免纠错。这样，服务端接收到的内容就是一个文件，直接读取Stream内容；对于压缩文本，这种处理方式是最优的。varformData=newFormData();formData.append("data",uploadData)formData.append("data1",newBlob([uploadData]))上图内容相同，只是传输方式不同。3.application/jsonJson也是目前比较流行的一种传输方式。json的内容在post传输过程中不会改变。如果文字内容不长，也是一个不错的方法。fetch("http://localhost.charlesproxy.com:8088/spread/postjson",{headers:{'Content-Type':'application/json',},body:JSON.stringify({data:uploadData}),方法:"POST"}).then(resp=>resp.text()).then(text=>{console.log(JSON.stringify(text));document.getElementById("result").innerHTML=JSON.stringify(text)})总结作为一个前端er，除了HTML、CSS、Javascript三大块之外，还要熟练使用axios等库来调用API。更重要的是了解如何调试网络请求。可以快速定位问题。这里有一个在Angular框架下动态加载js文件时返回Content-Type为text/html的demo。有兴趣的可以自己下载试试。Demo地址：https://gcdn.grapecity.com.cn...扩展阅读SpreadJS纯前端表格控件官网
