你所不知道 ❌ URL

你所不知道的 URL

0.说明

第一幕

产品：大叔有用户反映账户不能绑定公众号。
大叔：啊咧咧？怎么可能，我看看？
大叔：恩？这也没问题啊，魏虾米。
大叔：还是没问题啊，挖叉类。
大叔：T T，话说产品姐姐是不是Java提供接口的时候，没有对URL进行encodeURI。
产品：啊咧咧？我问问看？

第二幕

大叔：小二你给我过来！
小二：啊咧咧？怎么了大叔？
大叔：知道在URL中的+有时候会变成什么吗？
小二：啊咧咧？不是+吗？
大叔：知道在URL中的空格有时候会变成什么吗？
小二：啊咧咧？不是空格吗？
大叔：还不赶快自己去查查看！别也成了挖坑型选手。

1.杀手兄弟 - 加号与空格

0.说明

维基百科中关于百分号编码中有段说明。

当HTML表单中的数据被提交时，表单的域名与值被编码并通过HTTP的GET或者POST方法甚至更古远的email把请求发送给服务器。这里的编码方法采用了一个非常早期的通用的URI百分号编码方法，并且有很多小的修改如新行规范化以及 把空格符的编码"%20"替换为"+" . 按这套方法编码的数据的MIME类型是application/x-www-form-urlencoded, 当前仍用于（虽然非常过时了）HTML与XForms规范中. 此外，CGI规范包括了web服务器如何解码这类数据、利用这类数据的内容。

1.GET - 简单的在浏览器中测试

URL带有加号

在浏览器里输入URLhttps://www.baidu.com/s?wd=小二+大叔，这时候百度搜索框中出现的是小二 大叔，搜索框中+神奇的变成了空格。

URL带有空格

在浏览器里输入URLhttps://www.baidu.com/s?wd=小二 大叔，这时候百度搜索框中出现的是小二 大叔，URL中空格的变成%20。

URL带有%2B

在浏览器里输入URLhttps://www.baidu.com/s?wd=小二%2B大叔，这时候百度搜索框中出现的是小二+大叔，搜索框中%2B的变成+。

2.POST - 简单的PHP测试

代码

POSTMAN 发送请求

POST /1.php HTTP/1.1
Host: 127.0.0.1
Cache-Control: no-cache
Postman-Token: fed5740c-aceb-0f57-edc9-cf42a275b35a
Content-Type: application/x-www-form-urlencoded

word=%2B%2B%2B+%2B%2B%2B

输出

+++ +++

2.孕妇 - URL中的URL

0.说明

在社交登录或微信公众号等时候，我们常常会在URL中使用到回调地址来处理验证成功后的页面跳转。

例如:

• 回调地址为：lionis.taroball.com?username=lionis&sex=man
• 这时候在URL中附加回调信息时
• 地址变为www.xxx.com?redirect=lionis.taroball.com?username=lionis&sex=man。

这个时候尴尬的问题出现了，sex=man在这个时候变成了www.xxx.com的参数了，而不是lionis.taroball.com的参数了。

这个时候就需要对回调信息进行encodeURL。

2.代码

3.有 encodeURL

URL

localhost/test.php?redirect=lionis.taroball.com%3Fusername%3Dlionis%26sex%3Dman

输出

lionis.taroball.com?username=lionis&sex=man

4.无 encodeURL

URL

localhost/test.php?redirect=lionis.taroball.com?username=lionis&sex=man

输出

lionis.taroball.com?username=lionis

3.结论

GET

• 如果想在URL中使用+需要对URL进行encodeURL,把+编码成%2B。
• 在服务端渲染页面的时候，对URL需要encodeURL。
• 在客户端发送请求的时候，javascript需要使用正则来进行替换。
• 在服务端接受参数的时候，对关键字使用decodeURL。
• 对于URL中的URL也需要进行encodeURL

POST

• POST的Content-Type默认是application/x-www-form-urlencoded，顾名思义对URL进行了encodeURL。
• 想要了解更多有关POST可以看我之前写的你所不知道的POST。

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。

• 如果您想让更多人看到文章可以点个 点赞。
• 如果您想激励小二可以到 Github 给个 小星星。
• 如果您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop