在浏览器输入网址,Enter之后发生了什么?

a114c6de06bc923321230604e10aa424.gif

在浏览器输入网址,Enter之后发生了什么?

很多八股文会给出:

  1. 1. DNS Resolution

  2. 2. Establishing a Connection

  3. 3. Sending an Http Request

  4. 4. Receiving the HTTP Response

  5. 5. Rendering the Web Page

但今天我斗胆插入第0.9步URL Parsing

URL( uniform resource locator)由四部分组成:scheme、domain、path、resource

5305f2c29b44cc3748fed87c6324c166.png

URL Parsing做了2个事情:

  • • prase url:只有解析分离出domain,还有后续的第1步: DNS resolution

  • • url_encode

本文我主要想聊一聊url_encode

  1. 1. 为什么会有url_encode?

  2. 2. javascript encodeURI() vs encodeURIComponent()

  3. 3. 我为什么会关注到这个问题?

  4. 4. 常见的httpclient默认有做url_encode吗?


在浏览器插入https://www.baidu.com/s?wd=博客园马甲哥,Enter之前童鞋们可尝试拷贝地址栏, 粘贴到任意位置, 内容是:https://www.baidu.com/s?wd=%E5%8D%9A%E5%AE%A2%E5%9B%AD%E9%A9%AC%E7%94%B2%E5%93%A5, 这就是浏览器自动url_encode的结果, 浏览器会拿这个网址去做 dns、request行为。

1. 为什么会有url_encode?

url_encode 又叫百分号编码,为什么要有url_encode[1],看知乎。

总结下来:uri地址最初要求是以可显示、可写的 ascii 字符集, 非英文字符和其他特殊字符需要被编码。

默认按照UTF-8转化为字节流,每个字节按16进制表示,并添加%组成一个percent编码。

UTF-8 到底是什么意思?[2]

例如:汉字 “你好”

  • • UTF-8字节流打印为:-28 -67 -96 -27 -91 -67

  • • 对应的16进制表示为:E4 BD A0 E5 A5 BD

  • • URLEncode编译后为:%E4%BD%A0%E5%A5%BD

当然服务端会对应的url_decode函数,编码/解码的次数需要对应。

2. js 中的encodeURI() vs encodeURIComponent()

是js 中内置的全局函数,用于url_encode,不会对以下特殊字符编码,这也是为了确保url中原生字符的正确表达: A–Z a–z 0–9 - _ . ! ~ * ' ( ) ; / ? : @ & = + $ , #

const uri = 'https://mozilla.org/?x=шеллы';
const encoded = encodeURI(uri);
console.log(encoded);
// Expected output: "https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"

encodeURIComponent 也是全局函数,但他的用途是对字符串做完整的url_encode, 这个函数会对上面排除的字符做编码,这个函数一般用于已知是特殊字符需要做url编码。

// Encodes characters such as ?,=,/,&,:
console.log(`?x=${encodeURIComponent('test?')}`);
// Expected output: "?x=test%3F"
3.我为什么会想到这个问题?

我在使用lua-resty-http客户端做反向代理请求时关注到这个问题。

1720f20cfb98680283b08bdcfe3fe832.png

nginx内置变量并提供了自定义变量的能力[3]

  • • $request_uri
    full original request URI (with arguments)

  • • $uri
    current URI in request, normalized, The value of $uri may change during request processing, e.g. when doing internal redirects, or when using index files.

一开始lua_resty_http 将 $uri(解码值)送到应用,不符合应用的预期, 我这才发现应恢复成原始编码uri[4]

4. 常见的httpclient是否能自动url_encode?

.NET、go、lua的HttpClient(包括curl)都不会自动对 URL 进行编码。如果你的 URL 包含特殊字符或需要编码的字符,你需要自己手动进行 URL 编码。

  • • [C#] System.Net.WebUtility.UrlEncode

  • • [golang] url.QueryEscape(rawURL)

  • • [lua] ngx.escape_uri(str, 0)

本文记录了url_encode的来龙去脉;引用的知乎外链都是高赞答案,人人为我我为人人; 整理了常见httpclient url_encode的表现。  

文字和图片均为原创,一家之言,欢迎留言吐槽。

引用链接

[1] 为什么要有url_encode: https://zhuanlan.zhihu.com/p/557035152?utm_id=0
[2] UTF-8 到底是什么意思?: https://zhuanlan.zhihu.com/p/137875615
[3] nginx内置变量并提供了自定义变量的能力: https://nginx.org/en/docs/http/ngx_http_core_module.html
[4] 应恢复成原始编码uri: https://stackoverflow.com/questions/78225022/is-there-a-lua-equivalent-of-the-javascript-encodeuri-function

ed4eda19b88f6f5f06000f3297f47df5.gif

自古以来,同步/异步都是八股文第一章

async/await 贴脸输出,这次你总该明白了

流量调度、微服务可寻址性和注册中心

Go语言正/反向代理的姿势

两将军问题和TCP三次握手

"家长进校园"之《计算机和人工智能》

a068963a168236041bcb31eb867aed77.png

点“1bdf17b25e867d3a2e7659d7c02ffd7c.gif戳“在看5a462ff8c58d8640525ff31900af1612.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/827823.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

适用于手机蓝牙的热敏晶体FA1612AS

EPSON推出的一款1612小尺寸无源热敏晶体:FA1612AS。FA1612AS的额定频率为38.4Mhz的晶体单元,采用无铅材料,符合ROHS标准,内置热敏电阻,可用于移动电话,蓝牙等。热敏晶体FA1612AS的产品特性:额定频率:38.4MHZ外部尺寸规…

Github 2024-04-24 C开源项目日报 Top9

根据Github Trendings的统计,今日(2024-04-24统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目9C++项目1我的电视 - 安卓电视直播软件 创建周期:40 天开发语言:CStar数量:649 个Fork数量:124 次关注人数:649 人贡献人数:1 人Open…

linux问题处理汇总(基于centos7.9)

openssl 版本应更新 OpenSSL 1.1.1, currently the ‘ssl’ module is compiled with ‘OpenSSL 1.0.2k-fips 26 Jan 2017’. raise ImportError( E ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1, currently the ‘ssl’ module is compiled with ‘OpenSSL 1.0.2k-…

JS----前端将列表数据转树型数据

前端将列表数据转树型数据 场景:后端返回列表数据,由前端根据业务需求完成树型数据转换, 常用于侧边导航菜单,下拉树型数据项等 export function listToTree(data: []) {var map: any {},tree: any []data.forEach((item: any…

图像的矩(MATLAB源码)

颜色矩(Color Moment)是一种用来描述图像颜色分布的统计特征。它可以用来衡量图像中不同颜色之间的关系,以及颜色分布的特征。常见的颜色矩包括一阶矩(Mean)、二阶矩(Variance)、三阶矩(Skewness)和四阶矩(Kurtosis)等。 颜色矩能够提供关于图像颜色分布的信息,例…

每天五分钟计算机视觉:基于YOLO算法精确分类定位图片中的对象

滑动窗口的卷积的问题 滑动窗口的卷积实现效率很高,但是它依然不能够输出最精准的边界框,比如下面所示: 我们可以看到蓝色框不论在什么位置都不能很好的确定车的位置,有一个算法是YOLO 算法它能够帮助我们解决这个问题。 YOLO 算法 比如我们的输入图像是100*100,我们会…

Vue3、Vite和HTML5之间的关系

Vue3、Vite 和 HTML5 分别代表不同的技术和概念,它们之间存在相互关联。 1、Vue3 Vue3是一个用于创建用户界面的 JavaScript 框架,通过数据绑定、组件化设计和响应式系统,帮助开发者高效构建和维护复杂的互动界面。Vue3 中的模板使用 HTML&…

前端npm详解

前端npm详解 引言 npm(Node Package Manager)是前端开发中不可或缺的工具,它允许开发者轻松地共享和使用他人编写的代码,同时管理项目依赖。 npm的历史 起源 npm最初是作为Node.js的官方包管理器诞生的,由Isaac Z…

【OceanBase诊断调优 】—— 如何快速定位SQL问题

作者简介: 花名:洪波,OceanBase 数据库解决方案架构师,目前负责 OceanBase 数据库在各大型互联网公司及企事业单位的落地与技术指导,曾就职于互联网大厂和金融科技公司,主导过多项数据库升级、迁移、国产化…

CSS的网页美化功能

<1>文字类 通常情况下&#xff0c;一般使用span对文字进行重点突出&#xff0c;用div来操作一段代码块。 字体的所有属性&#xff1a; 属性描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样…

5-内核开发-/proc File System 学习

5-内核开发-/proc File System 学习 课程简介&#xff1a; Linux内核开发入门是一门旨在帮助学习者从最基本的知识开始学习Linux内核开发的入门课程。该课程旨在为对Linux内核开发感兴趣的初学者提供一个扎实的基础&#xff0c;让他们能够理解和参与到Linux内核的开发过程中。…

经典案例|使用Supabase解决可视化大屏项目的常见问题

敏博科技专业致力于应急管理行业&#xff0c;提供以物联网技术和感知预警算法模型为核心的先进产品和解决方案。应急管理行业的业务非常繁多和复杂&#xff0c;很多时候都需要在短时间内交付出稳定高效的业务系统。如下两张图某市的安全生产监测预警系统 MemFire Cloud应用开…

spring boot项目怎么预防CSRF攻击

在Spring Boot项目中预防CSRF攻击通常涉及利用Spring Security框架提供的内置支持。Spring Security已经为CSRF提供了默认的防护措施&#xff0c;但根据应用的特定需求&#xff0c;可能需要进行一些配置调整或扩展。下面是一系列步骤和建议&#xff0c;用于在Spring Boot项目中…

Redis入门到通关之Redis数据结构-Hash篇

文章目录 ☃️ 概述☃️底层实现☃️源码☃️其他 欢迎来到 请回答1024 的博客 &#x1f353;&#x1f353;&#x1f353;欢迎来到 请回答1024的博客 关于博主&#xff1a; 我是 请回答1024&#xff0c;一个追求数学与计算的边界、时间与空间的平衡&#xff0c;0与1的延伸的后…

关于电脑卡死如何开机、F8、安全模式

问题来源和原因 亲戚家台式电脑无法开机了 原因&#xff1a;游戏、等等等东西太多占用内存&#xff0c;导致系统无法开机 比如常见的开机蓝屏&#xff0c;不能正常开机&#xff0c;这个时候我们可以采取通过安全模式启动的办法来启动电脑&#xff0c;从而进一步找到问题并排查故…

如何用基于 Java 配置的方式配置 Spring?

Spring 对 Java 配置的支持是由 Configuration 注解和 Bean 注解来实现的。 有 Bean 注解的 方法将会实例化、配置和初始化一个 新对象&#xff0c;这个对象将由 Spring 的 IoC 容器来管理。Bean 声明所起到的作用与 <bean/> 元素类似。被 Configuration 所注解的类则表…

模型部署的艺术:让深度学习模型跃入生产现实

模型部署的艺术&#xff1a;让深度学习模型跃入生产现实 1 引言 1.1 部署的意义&#xff1a;为何部署是项目成功的关键 在深度学习项目的生命周期中&#xff0c;模型的部署是其成败的关键之一。通常&#xff0c;一个模型从概念构思、数据收集、训练到优化&#xff0c;最终目的…

电子信息制造工厂5G智能制造数字孪生可视化平台,推进数字化转型

电子信息制造工厂5G智能制造数字孪生可视化平台&#xff0c;推进数字化转型。5G智能制造数字孪生可视化平台利用5G网络的高速、低延迟特性&#xff0c;结合数字孪生技术和可视化界面&#xff0c;为电子信息制造工厂提供了一种全新的生产管理模式。不仅提升生产效率&#xff0c;…

nodejs 中间件

一、是什么 Node.js 中的中间件&#xff0c;特别是针对 Web 开发框架&#xff08;如 Express、Koa、Hapi 等&#xff09;的中间件&#xff0c;其核心功能是用来对 HTTP 请求生命周期进行拦截、处理和传递的。 中间件这一概念是 Web 开发框架为了实现请求处理流程的模块化、可…

SpringBoot学习之Kafka下载安装和启动【Windows版本】(三十四)

一、配置Java环境变量 打开CMD输入java -version检查java环境变量是否配置正确,如果配置正确在CMD窗口输入java -version应该输出如下: ​ 怎么配置Java环境变量这里我就不赘叙了,网上教程很多,请读者自行搜索操作。 二、下载Kafka 1、Kafka官网地址:Apache Kafka,…