HTTP请求参数的编码和解码（浏览器和服务端联调手册）

使用浏览器，查看页面，点击按钮提交信息，实际上是一次次http请求。浏览器在发送这些请求时，是需要对请求参数中的特殊字符做编码的，服务端需要对参数解码，才能知道参数的原始内容，再进行处理。不同的场景，编码方式是存在差别的。

GET请求

get请求的参数会在URL的中，在“？”的后面。一般来说，URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。比如，世界上有英文字母的网址 http://www.abc.com，但是没有中文网址 http://www.我是网站.com。

这是因为网络标准RFC 1738做了硬性规定：

"只有字母和数字[0-9a-zA-Z]、一些特殊符号"-_.!*'()+"[不包括双引号]，和保留字（&，？之类的）才可以不经过编码直接用于URL。"

这个编码是由浏览器完成的，编码方式叫做“URL编码”

场景：点击链接

注意参数name含有空格

<a href="/?name=前  ++端">前端</a>

抓包得到：

GET /?name=%E5%89%8D%20%20++%E7%AB%AF HTTP/1.1

浏览器html文件中head标签中的页面编码方式 utf-8

<meta content="text/html; charset=utf-8" http-equiv="content-type">

把中文的“前端” 用 utf-8字符集的十六进制 “E5898D”（前）， “E7ABAF”（端），然后用”%“分割，空格转化成了“%20”

场景：form表单提交，method默认为“get”，enctype编码方式默认为“application/x-www-form-urlencoded”

“application/x-www-form-urlencoded”，特殊字符编码方式和“点击链接”场景是一样的，唯一的区别是空格会转化为“+”，内容中的
“+”url编码为“%2B”

例如：

value值为“前 ++端”含有空格和+

        <h2>get</h2>
        <form action="/">
            <label>name</label><input name="name" value="前  ++端"/>
            <input type="submit" id="submit" value="提交"/>
        </form>

点击提交表单，抓包得到：

GET /?name=%E5%89%8D++%2B%2B%E7%AB%AF HTTP/1.1

ajax异步提交

let xhr = new XMLHttpRequest()
xhr.open('get', '/?name=前  ++端', true)
xhr.send()

抓包得到：

GET /?name=%E5%89%8D%20%20++%E7%AB%AF HTTP/1.1

编码的结果和点击链接场景是一致的。

结论：除了form表单的get方式提交的编码方式不一样，其他的都一样。

POST请求

form表单提交

非文件表单项提交

默认的enctype="application/x-www-form-urlencoded"

        <h2>post</h2>
        <form action="/post" method="post">
            <label>name</label><input name="name" value="前  ++端"/>
            <input type="submit" id="submit" value="提交"/>
        </form>

点击提交后，抓包得到：

POST /post HTTP/1.1
Host: localhost:3001
Content-Length: 31
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:3001
Upgrade-Insecure-Requests: 1
**Content-Type: application/x-www-form-urlencoded**
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, br

**name=%E5%89%8D++%2B%2B%E7%AB%AF**

post请求传输的参数在请求体中，编码成了 “name=%E5%89%8D++%2B%2B%E7%AB%AF”，说明使用enctype="application/x-www-form-urlencoded"方式
编码，get和post的结果是一样的。

另外post提交需要关注“Content-Type”这个请求头，这个请求头告诉服务端，我请求体内容和编码格式。

文件上传

文件上传必须使用enctype="multipart/form-data"，表示请求体内容不做URL编码，原文传输

        <h2>file</h2>
        <form action="/post" id="fileupload" method="post" enctype="multipart/form-data">
            <label>name</label><input name="name" value="前  ++端"/>
            <label>file</label><input type="file" name="file"/>
            <input type="submit" id="submit" value="提交"/>
        </form>

点击提交按钮后，抓包得到：

alt

注意：Content-Type为: multipart/form-data; boundary=----WebKitFormBoundaryIAobIVW9hww2sV7i
表示编码是multipart/form-data，而且每一个表单项使用“----WebKitFormBoundaryIAobIVW9hww2sV7i”作为分割线。
然后name的值“前 ++端”，也没有做编码处理。

ajax异步提交

原生ajax

xhr.open('post', '/post', true)
xhr.send(JSON.stringify({name:'前  ++端'}))

抓包得到：

POST /post HTTP/1.1
Host: localhost:3001
Content-Length: 21
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:3001
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Content-Type: text/plain;charset=UTF-8
Accept: */*
DNT: 1

{"name":"前  ++端"}

ajax原生post请求，浏览器对请求体不做任何编码处理，Content-Type: text/plain;charset=UTF-8

Jquery

$.ajax({
    url: '/post',
    method: 'post',
    data: {
        name: '前  ++端',
    }
})

jquery对于ajax的请求内容的处理，默认的编码方式application/x-www-form-urlencoded;

POST /post HTTP/1.1
Host: localhost:3001
Content-Length: 31
Pragma: no-cache
Cache-Control: no-cache
Accept: */*
Origin: http://localhost:3001
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
DNT: 1

name=%E5%89%8D++%2B%2B%E7%AB%AF

因为jquery默认是application/x-www-form-urlencoded,但是对于使用formdata做图片上传的话，他不能自动识别出formdata，需要使用enctype="multipart/form-data"，只能手动调整参数processData,contentType来解决这个问题：

let formdata = new FormData(document.querySelector("form"));
$.ajax({
  url: "/post",
  type: "post",
  data: formdata,
  processData: false,  // 不处理数据
  contentType: false   // 不设置内容类型
});

axios

axios是最近在前端圈内大面积使用的ajax框架，功能强悍，可以自行google搜索。

axios.post('/post', {
    name: '前  ++端',
})

得到：

POST /post HTTP/1.1
Host: localhost:3001
Content-Length: 21
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Origin: http://localhost:3001
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Content-Type: application/json;charset=UTF-8
DNT: 1

{"name":"前  ++端"}

axios默认编码方式是将请求体内容json stringfy，然后设置Content-Type: application/json;charset=UTF-8

在联调是，会出现很多服务端不支持json格式的数据的处理，只支持传统的application/x-www-form-urlencoded，和传统的表单提交一样的格式

这时就需要使用QS框架了

import qs from 'qs'

axios.post('/post', qs.stringify({
    name: '前  ++端'
}))

这样能够提交application/x-www-form-urlencoded编码的数据。

axios能够智能判断需要提交的数据，如果是formdata，会自动切换成使用multipart/form-data编码

let formdata = new FormData(document.querySelector("form"));
axios.post('/post', formdata) //不要做任何处理，这个很赞！！

服务端解码

目前使用nodejs框架koa和koa-body中间件做post请求参数的解码，其他语言框架的处理思维也是一致的。

GET请求

decodeURIComponent(str.replace(/\+/g, ' '));

将使用form表单get请求，使用‘application/x-www-form-urlencoded’编码后的’+’，转化成空格，再URL解码

so easy！！！

POST请求

alt

ctx.is 是做判断，进入不同的处理逻辑，ctx.js是什么？

var value = req.headers['content-type’]
return typeis(value, types)

ctx.js是服务端取请求头中content-type，做类型判断。

所以只要 content-type 和 请求体内容正确的一一对应，那么服务端就能正确的解码出浏览器传输过来的内容

json字符串：Content-Type: application/json;charset=UTF-8

alt

表单提交，URL编码：Content-Type: application/x-www-form-urlencoded; charset=UTF-8

alt

文件上传：Content-Type为: multipart/form-data; boundary=----WebKitFormBoundaryIAobIVW9hww2sV7i

alt
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容