在浏览器中输入网址回车到页面显示发生的那些事儿

本文详细介绍了从用户在浏览器地址栏输入URL到页面加载完成的整个过程。包括域名解析、TCP连接建立、HTTP请求与响应、资源加载等关键步骤。

总的思路:在浏览器地址栏键入URL,按下回车之后发生的几个事件:

1)浏览器向DNS服务器请求解析该URL中的域名所对应的IP地址;

2)解析出IP地址后,根据该IP地址和默认端口80,和服务器建立TCP连接;

3)浏览器发出读取文件(URL中域名后面部分对应的文件)的HTTP请求,该请求报文作为TCP三次握手的第三个报文的数据发送给服务器;

4)服务器给出相应,把对应的html文本发送给浏览器;

5)释放TCP连接;

6)浏览器将该文本显示出来。

具体的实现:

1、浏览器根据域名查询域名对应的服务器的IP地址。

根据域名查询IP地址的顺序如下:浏览器DNS >>> 操作系统DNS缓存 >>> 本地(ISP)域名服务器缓存 >>> 根域名服务器。
在请求到根域名服务器之后,根域名服务器告诉本地域名服务器,下一次应查询的顶级域名服务器dns.com的IP地址。

本地域名服务器向顶级域名服务器dns.com进行查询,顶级域名服务器dns.com告诉本地域名服务器,下一步应查询的权限服务器dns.abc.com的IP地址。

本地域名服务器向权限域名服务器dns.abc.com进行查询,权限域名服务器dns.abc.com告诉本地域名服务器,所查询的主机的IP地址。

最终查询到IP地址之后,本地域名服务器将IP地址告诉给浏览器。

2、浏览器主机根据IP地址与服务器建立TCP连接。

建立TCP连接需要进行三次握手。

(1)浏览器向服务器发送syn(同步序列编号)包,并进入SYN_SENT(请求连接)状态。syn=j;

(2)服务器接收到syn包后,返回一个ACK(确认包)告诉浏览器我已经接受到你的信息了,并且发送一个自己的syn包,等待浏览器的回复,此时服务端进入SYN_RECIVED(意思是我已经接收到你的信息了)状态。 ACK=j+1 SYN=k

(3)浏览器接受到来自服务器的SYN和ACK包后,向服务器发送确认包ACK,此时,包发送完毕,浏览器和服务器都进入ESTABLISHED(TCP连接成功)状态且完成三次握手。 ACK=k+1

3、浏览器将访问请求封装为一个HTTP请求报文,通过TCP协议发送给服务器。

HTTP请求报文的方法是get方式;如果浏览器存储了该域名下的Cookies,那么会把Cookies放入HTTP请求头里发给服务器。

4、服务器收到请求并响应,生成一个HTTP响应报文,通过TCP协议发送给浏览器主机。

HTTP响应报文的头部包含了状态码(Status-Code),三位数字,有5大类。HTTP响应报文内容则是网页的编码内容。

5、浏览器得到响应报文之后,对响应报文进行解析。

在浏览器没有完整接受全部HTML文档时,它就已经开始显示这个页面了。如果是个静态的页面,那到此就基本结束了。如果是是动态的,那么在浏览器显示HTML时,会获取嵌入在HTML中的对象,浏览器会发送获取请求来重新获得这些文件。

6、浏览器异步请求其他资源。

在分析HTML时,若发现网页引用了其他资源,例如:css、图片等,浏览器则发起HTTP请求,得到响应资源。

<think>我们正在分析用户的问题:为什么在某些浏览器输入网址后无法跳转,但刷新页面后可以正常访问?结合用户提供的引用[1]中的信息(a标签点击页面跳转是-403,回车后正常了)以及用户的问题描述,我们推测可能涉及到HTTP缓存、浏览器行为、服务器配置或安全策略等方面。可能的原因分析:1.**HTTP缓存问题**:浏览器在首次访问可能使用了过期的缓存,导致403Forbidden错误。刷新浏览器可能会强制重新验证缓存或重新请求,从而得到正确的响应。2.**认证信息问题**:某些页面需要认证(如Cookie、Token),在输入网址浏览器可能未携带必要的认证信息,而刷新浏览器会携带当前会话的Cookie,因此能够正常访问。3.**Referrer策略**:引用[1]中提到了`referrerpolicy="no-referrer"`,这可能导致服务器端因为缺少Referer头而拒绝请求(某些安全策略会验证Referer)。刷新页面,由于是从当前页面发起的请求,Referer头可能是允许的,因此正常。4.**CSRF保护机制**:某些框架(如Django)有CSRF保护,对于某些请求方式(如POST)会验证CSRFtoken,但如果是直接输入网址(GET请求)通常不需要。但如果是通过a标签跳转(GET)且服务器配置了严格的CSRF保护,也可能出现异常。5.**服务器配置问题**:服务器可能对某些User-Agent或请求头有特殊限制,或者有IP限制等,导致直接访问被拒绝,而刷新由于请求头的变化(例如包含更多信息)而通过。针对引用[1]的具体情况:用户使用了ElementUI的`el-link`组件,设置了`target="_blank"`和`referrerpolicy="no-referrer"`。这会导致打开新标签页不发送Referer头。而403错误通常表示服务器理解请求但拒绝执行,可能的原因包括:-服务器配置了Referer检查,缺少Referer头则拒绝。-服务器对直接访问(没有Referer)的请求返回403,而刷新由于是从同域页面发起的(Referer存在)所以正常。因此,用户遇到的情况可能是:点击链接(新标签页打开,无Referer)导致服务器返回403,而直接在地址栏输入相同网址(此也没有Referer)也会返回403。但是,在已经打开的新标签页中按回车(刷新),由于当前页面已经有了来源(即自身),刷新请求会携带Referer(当前页面的URL),如果这个Referer在服务器允许的范围内,则请求成功。另外,用户提到“回车后正常了”,这里“回车”可能是指在地址栏输入网址后按回车,但第一次不行,第二次回车(刷新)就可以了?这不太符合常规。所以更可能是这样的场景:-用户点击链接(新标签页打开)->403错误-用户在该新标签页的地址栏按回车(刷新)->正常显示原因就是上述的Referer策略。解决方案:1.检查服务器端的Referer检查策略,是否允许空Referer或特定的来源。2.调整`referrerpolicy`属性,例如改为`origin`或移除该属性(默认会发送Referer),但注意隐私问题。3.如果确实需要`no-referrer`,则需调整服务器配置以允许无Referer的请求。其他可能的原因及解决:-如果是缓存问题,可以尝试清除缓存或设置合适的缓存控制头。-如果是认证问题,确保在首次请求携带必要的认证信息。因此,针对用户的问题,我们可以总结为:主要是由于浏览器发送的请求头信息不同(特别是Referer头)导致服务器返回不同的响应。回答结构:1.问题原因分析(重点在Referer策略)2.其他可能的原因3.解决方案建议注意:用户的问题描述中提到了“输入网址后无法跳转,但刷新页面后可以”,这里“输入网址”是指直接在浏览器地址栏输入回车,而刷新是指在同一页面按F5或地址栏回车。这种情况下,第一次请求(输入网址回车)没有Referer(因为是直接输入),刷新请求头中会包含当前页面的URL作为Referer(即自己)。所以如果服务器要求Referer必须存在且匹配,那么第一次就会失败,而刷新会成功。但这里有一个矛盾:直接输入网址的请求通常没有Referer,刷新Referer是当前页面的URL(也就是同一个网址)。如果服务器要求Referer必须存在,那么直接输入网址的请求应该永远失败,但刷新会成功。然而,用户描述的是“输入网址回车后无法跳转,但刷新后正常”,这正好符合这种情况。所以核心原因就是:服务器配置了Referer检查,且不允许空Referer。下面组织回答。</think>### 浏览器输入网址无法跳转但刷新后正常的原因分析 #### 核心原因:Referer 策略冲突 引用[1]中提到的 `referrerpolicy="no-referrer"` 是关键因素。当浏览器首次访问 URL : 1. **直接输入网址**:浏览器发送 **无 Referer 头** 的请求 2. **刷新页面**:浏览器会携带 **当前页面 URL 作为 Referer** 3. **服务器配置**:某些安全策略(如 CSRF 防护)会拒绝无 Referer 的请求,导致 403 错误 ```mermaid graph LR A[输入网址回车] --> B[无 Referer 头] C[刷新页面] --> D[携带当前 URL Referer] B --> E[服务器拒绝请求 403] D --> F[服务器接受请求 200] ``` #### 其他常见原因: 1. **浏览器缓存问题** - 首次加载使用了过期的缓存资源 - 刷新强制重新验证 (`Cache-Control: no-cache`) 2. **Cookie/认证问题** - 首次请求未携带会话 Cookie - 刷新浏览器附加了认证信息 - 常见于需要登录的页面 3. **DNS 解析延迟** - 首次请求 DNS 未完全生效 - 刷新 DNS 缓存已就绪 4. **前端路由冲突** (SPA 应用) - 直接访问深层路由前端路由未初始化 - 刷新路由系统已加载完成 5. **HTTPS 混合内容阻塞** - 页面包含 HTTP 资源浏览器拦截 - 刷新可能触发不同加载顺序 #### 解决方案: 1. **调整 Referer 策略** ```html <!-- 改为默认策略 --> <a href="..." target="_blank" referrerpolicy="origin"> ``` 2. **服务器配置调整** - 允许空 Referer 请求 - 配置 CORS 白名单 ```nginx # Nginx 配置示例 add_header 'Access-Control-Allow-Origin' 'https://yourdomain.com'; ``` 3. **前端缓存控制** ```html <meta http-equiv="Cache-Control" content="no-cache"> ``` 4. **路由配置优化** (Vue/React) ```javascript // 配置 history 模式回退 const router = createRouter({ history: createWebHistory(), fallback: true // 处理直接访问路由 }) ``` > **实际案例**:某电商平台支付页面出现此问题,因支付网关要求验证 Referer。移除 `referrerpolicy="no-referrer"` 后解决[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值