码迷,mamicode.com
首页 > Web开发 > 详细

前端为什么要对url进行编码

时间:2017-09-25 20:40:59      阅读:340      评论:0      收藏:0      [点我收藏+]

标签:不能   stat   怎么办   英文   sof   href   键值   oauth   字符   

为什么要对url进行编码

  • url有规范,在参数值中出现&字符会截断参数
  • url中文的问题,编码客转换为英文
  • 也是第一种情况,url中有个参数值是url,传输的时候会出现错误

例1

有这样一串参数: name1=value1&name2=value2

我们来说一下客户端到服务端的概念上解析过程, 上述字符串在计算机中用ASCII码表示为:

6E616D6531 3D 76616C756531 26 6E616D6532 3D 76616C756532
对应关系: 6E616D6531 --> name1 3D
--> =
76616C756531 --> value1
26 --> &
6E616D6532 --> name2
3D -->
=
76616C756532 --> value2

  服务端在接收到该数据后就可以遍历该字节流,首先一个字节一个字节的吃,当吃到3D这字节后,服务端就知道前面吃得字节表示一个key,再想后吃,如果遇到26,说明从刚才吃的3D到26子节之间的是上一个key的value,以此类推就可以解析出客户端传过来的参数。

现在有这样一个问题,如果我的参数值中就包含=或&这种特殊字符的时候该怎么办?

  比如说“name1=value1”,其中value1的值是“va&lu=e1”字符串,那么实际在传输过程中就会变成这样“name1=va&lu=e1”。我们的本意是就只有一个键值对,但是服务端会解析成两个键值对,这样就产生了奇异。

如何解决上述问题带来的歧义呢?

解决的办法就是对参数进行URL编码

URL编码只是简单的在特殊字符的各个字节前加上%,例如,我们对上述会产生奇异的字符进行URL编码后结果:“name1=va%26lu%3D”,这样服务端会把紧跟在“%”后的字节当成普通的字节,就是不会把它当成各个参数或键值对的分隔符。

例2

一个接口,你传送过去时,需要带上你这边的回调地址,也是个url. 这样你不能url+url传送,需要一个urlencode把回调地址编码,防止发生问题
例如: 微信的一个接口

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

REDIRECT_URI 这裡应该填你的服务器回调地址.正常写法如 http://api.baidu.com/callback.php

那么生成的接口就是

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http://api.baidu.com/callback.php&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

这样访问肯定出问题...
那么http://api.baidu.com/callback.php 这个回调地址, 就要转码后(encodeURIComponent)再放到地址中发送.

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http%3A%2F%2Fapi.baidu.com%2Fcallback.php&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

 

文章参考: 

http://blog.csdn.net/chanda_yang/article/details/52422575

https://segmentfault.com/q/1010000002991580

https://www.zhihu.com/question/19673368

 

前端为什么要对url进行编码

标签:不能   stat   怎么办   英文   sof   href   键值   oauth   字符   

原文地址:http://www.cnblogs.com/lvmylife/p/7593576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!