为什么要对url进行编码

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

例1

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

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

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

  服务端在接收到该数据后就可以遍历该字节流,首先一个字节一个字节的吃,当吃到3D这字节后,服务端就知道前面吃得字节表示一个key,再想后吃,如果遇到,说明从刚才吃的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进行编码的更多相关文章

  1. URL的编码和解码

    URL的编码和解码 参考:阮一峰--关于URL编码 1 为什么要URL编码 在因特网上传送URL,只能采用ASCII字符集 也就是说URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和 ...

  2. 【Web】URI和URL,及URL的编码

    URI和URL是什么,以及他们的区别 URL,Uniform Resource Locator,统一资源定位符.用于表示网络上服务器的资源所在位置,比如我们输入浏览器的地址. URI,Uniform ...

  3. JS 和 Java 中URL特殊字符编码方式

    前几天遇到url特殊字符编码的问题,在这里整理一下: JavaScript 1.  编码 escape(String) 其中某些字符被替换成了十六进制的转义序列. 解码 unescape(String ...

  4. html-----018----HTML Web Server/HTML URL 字符编码

    HTML Web Server 如果希望向世界发布您的网站,那么您必须把它存放在 web 服务器上. 托管自己的网站 在自己的服务器上托管网站始终是一个选项.有几点需要考虑: 硬件支出 如果要运行“真 ...

  5. url在线编码和解码

    在工作中,经常遇到encode之后的url.想查看里面的某个参数的时候,很不直观.今天在网上搜了一下对url在线编码和解码的网站.对我来说,使用起来很方便.而且这个网站里面,不仅仅有对url的编码和解 ...

  6. JS对url进行编码和解码(三种方式区别)

    Javascript语言用于编码的函数,一共有三个,最古老的一个就是escape().虽然这个函数现在已经不提倡使用了,但是由于历史原因,很多地方还在使用它,所以有必要先从它讲起. escape 和 ...

  7. URL地址编码和解码

    0. 参考 [整理]关于http(GET或POST)请求中的url地址的编码(encode)和解码(decode) python3中的urlopen对于中文url是如何处理的? 中文URL的编码问题 ...

  8. c# 对Url 解码编码

    /// <summary> /// 对Url进行编码 /// </summary> /// <param name="url">url</ ...

  9. js 对url进行编码和解码的三种方式

    一.escape 和 unescape escape 原理:对除 ASCII字母.数字.标点符号(@ * _ + - . /) 以外的字符进行编码 .编码的字符被替换成了十六进制的转义序列 不编码的字 ...

随机推荐

  1. css贝塞尔曲线模仿饿了么购物车小球动画

    在线观看贝塞尔曲线值:传送门 在线观看动画效果:传送门 代码: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  2. 在JS中 实现不用中间变量temp 实现两个变量值得交换

    1.使用加减法; var a=1; var b=2; a=a+b; b=a-b; a=a-b; 2.使用乘除法(乘除法更像是加减法向乘除运算的映射) var a=1; var b=2; a = a * ...

  3. object-oriented 第二次作业(2)

    面向对象程序设计自学计划 由于我的英文实在是很差,所以我就没有去考虑看英文的课程视频.网络上的课程有很多,什么学校的也有,一开始我不知道该如何开始选择课程.感觉每个都还可以.后来在群里的看到别人推荐的 ...

  4. opencart

    1. Deleting english language, what happens?   Disable English tab , category and products     1) Fir ...

  5. LintCode-61.搜索区间

    搜索区间 给定一个包含 n 个整数的排序数组,找出给定目标值 target 的起始和结束位置. 如果目标值不在数组中,则返回[-1, -1] 样例 给出[5, 7, 7, 8, 8, 10]和目标值t ...

  6. 原生javascript自定义input[type=radio]效果

    2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...

  7. 将sublime添加到右键菜单

    sublime text 添加到鼠标右键功能: 把以下内容复制并保存到文件,重命名为:sublime_addright.reg,然后双击就可以了. (注意:需要把下面代码中的Sublime的安装目录( ...

  8. 发送tcp的时候,数据包是如何拷贝的

    发送数据包的时候,用户态的数据包是如何拷贝到内核的kiovec msghd 结构体 icmp是走sock吗? 每一个skb_buffer的大小都是固定的吗?所以有skb_available这样的函数 ...

  9. ASP.NET MVC下使用文件上传和IIS7下的默认设置限制了上传大小的方法

    不多说了,直接用别人的 http://www.cnblogs.com/jiekzou/p/4491505.html

  10. 【Python】python 调用c语言函数

    虽然python是万能的,但是对于某些特殊功能,需要c语言才能完成.这样,就需要用python来调用c的代码了具体流程:c编写相关函数 ,编译成库然后在python中加载这些库,指定调用函数.这些函数 ...