当打开浏览器,从在地址栏里输入一个URL开始,到出现整个页面,网络上都发生了什么事

本文详细介绍了从用户在浏览器中输入URL到页面完全加载的过程。包括域名解析、HTTP请求、服务器处理、HTML渲染等多个步骤,揭示了网页加载背后的复杂机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、浏览器查找域名的IP地址

导航的第一步是通过访问域名找出其IP地址。DNS查找过程如下:

  • 浏览器缓存——浏览器会缓存DNS记录一段时间(2分钟到30分钟不等并由浏览器决定)。
  • 系统缓存——如果浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用。
  • 路由器缓存—接着,前面的查询请求发向路由器,它一般会有自己的DNS缓存。
  • ISP DNS缓存——接下来要检查的是ISP缓存DNS的服务器。在这里一般都能找到相应的缓存记录。
  • 递归搜索——你的ISP的DNS服务器从根域名服务器开始进行递归搜索(顶级域名服务器到一般DNS服务器)

备注:一下方法可以消除这个瓶颈:循环DNS(DNS查找时返回多个IP时的解决方案。举例来说,Facebook.com实际上就对应了四个IP地址。

     负载平衡器(以一个特定IP地址侦听并将网络请求转发到群服务器上的硬件设备)

                                                    地理DNS根据用户所处的地理位置,通过吧域名映射到多个不同的IP地址提高可扩展性。

2、浏览器给web服务器发送一个HTTP请求

GET  http://facebook.com/   HTTP/1.1

Accept:  application/x-ms-application,image/jpeg

User-Agent:Mozilla/4.0

Accept-Encoding:gzip,deflate

Connection:Keep-Alive

Host:facebook.com

3、如果是大型服务器发送永久重定向响应

HTTP/1.1 301 Moved Permanently

Cache-Control:private,no-store,on-cache

Expires:Sat,01 jan 2000

location:http://www.facebook.com

4、浏览器跟踪重定向地址

现在,浏览器知道了“http://  ”,在发送另外一个请求。

5、服务器“处理”请求

服务器接收到获取请求,然后处理并返回一个响应。表面上看起来是一个顺利的任务,但中间发生了很多有意思的东西:

a、WEB服务器软件

web服务器软件(IIS、Apache、……)接收到HTTP请求,然后确定执行什么请求处理来处理它。请求处理时一个能够读懂请求并且能生成HTML来进行相应的程序

b、请求处理

请求处理阅读请求及它的参数和cookies。它会读取也可能更新一些数据,并将数据存储在服务器上。然后,处理会生成一个HTML响应。

6、服务器发回一个HTML响应

HTTP/1.1 200 OK

Cache-Control:private,no-store……

……

<Doctype!>

7、浏览器开始显示HTML

在浏览器没有完整接收全部HTML文档时,它就开始显示这个页面了


8、浏览器发送获取嵌入在HTML中的对象

图片、css样表、javascript文件

9、浏览器发送异步(AJAX)请求



在别处找到de另一个答案:

打开浏览器输入URL 回车以后,就会在网络上寻找路由器,找到路由器里面以后,就读路由表理论上在12个路由表之内能找到你所输入的URL 然后空连接到这个地址 如果是http头然后就会进行默认的监听80端口如果是FTP头就会监听其它端口 监听正常以后会进行握手 握手就是确定协议类型 接着会话 你的电脑像URL提交需要信息的一个表单 电脑说我要你这个地址下面的所有WEB页面 那边的WEB站点会要你的电脑出示身份证看看你的电脑是不是好人 如果是好人 就说OK 我给你 但是我先给你一份我WEB里面资料的单据把 就是cookies 同时WEB站点在自己运算 把网页代码运算成用户可以接受的窗口网页 然后你的电脑拿到了这个单据 再根据单据里面的内容和WEB要 WEB就把运算好的网页返回到你的浏览器中。

<think>嗯,用户遇到了前后端分离的汽车租赁管理系统图片不显示的问题,尤其是车辆图片和头像。首先,我需要理清可能的原因,然后逐步排查。 首先考虑前端部分。图片路径是否正确?如果使用的是相对路径,可能需要检查构建后的目录结构,确认图片是否被正确放置。比如,开发环境下可能没问题,但生产环境下路径可能不同。此外,如果使用模块化的导入方式,比如在React或Vue中,可能需要通过require或import引入图片,否则路径可能不会被正确处理。还有,前端是否有动态拼接图片路径的情况?比如从API获取文件名后拼接,这时要检查拼接后的URL是否正确,是否存在拼写错误或路径错误。 然后是后端的问题。用户提到代码找不到引用图片的地方,可能后端没有正确提供图片资源的静态访问。比如,Spring Boot需要配置资源目录,或者Nginx等服务器没有正确代理静态资源。检查后端是否设置了静态资源处理,比如使用Express的static中间件,或者Spring的ResourceHandler。同时,确认上传的图片是否保存在服务器指定的目录,并且权限设置正确,允许前端访问。 网络请求方面,可以通过浏览器开发者工具查看图片的请求是否成功。如果返回404,说明路径错误;403可能是权限问题;500则是服务器内部错误。控制台是否有CORS错误?这可能是因为后端没有正确配置跨域,导致图片请求被阻止。 文件上传和存储逻辑也需要检查。上传功能是否正常?图片是否成功保存到指定目录?数据库存储的路径是否正确,是否包含多余或缺失的目录层级。比如,数据库存的是相对路径,但前端请求时没有加上基础URL。 缓存问题也可能导致图片不显示,尤其是浏览器缓存旧资源。建议强制刷新或清除缓存测试。另外,文件权限问题在Linux服务器上常见,需要确认图片文件是否有读取权限。 总结下来,应该逐步检查路径配置、静态资源处理、网络请求、上传逻辑和文件权限,结合浏览器开发者工具的具体报错信息,定位问题所在。</think>你的图片无法显示问题可能由以下几个常见原因导致。我们可以分步骤排查: ### 一、前端路径问题排查 1. **检查图片引用方式** - 使用相对路径时确认构建后的路径层级(如:`./assets/` 实际可能变为 `/static/`) - 动态绑定图片路径时需验证拼接结果: ```javascript // Vue示例(错误案例) <img :src="'../assets/' + car.image"> // 编译后路径可能失效 // 正确做法(需通过require或import处理) <img :src="require(`@/assets/${car.image}`)"> ``` 2. **查看浏览器控制台** - 按F12打开开发者工具: - 查看图片请求是否404(路径错误) - 检查实际请求URL与预期是否一致 ### 二、后端服务配置问题 1. **静态资源托管配置** - Spring Boot示例: ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/uploads/**") .addResourceLocations("file:uploads/"); // 注意"file:"前缀 } } ``` 2. **文件存储位置验证** - 确认上传目录存在且路径正确 - 检查服务器文件权限(Linux系统常见问题): ```bash ls -l /path/to/upload chmod -R 755 /path/to/upload # 设置读写权限 ``` ### 三、数据库存储问题 1. **路径存储格式检查** - 正确存储示例:`uploads/cars/2023/img_01.jpg` - 错误案例:`C:\project\uploads\...`(绝对路径不可移植) ### 四、网络请求验证 1. **直接访问测试** - 在浏览器地址栏直接输入图片URL: ``` http://api.yourdomain.com/uploads/avatar/user123.jpg ``` - 若无法加载,说明后端服务未正确响应 ### 五、跨域问题排查 1. 检查响应头是否包含: ``` Access-Control-Allow-Origin: * Access-Control-Expose-Headers: Content-Disposition ``` ### 六、文件上传流程验证 1. 测试上传接口: - 使用Postman发送multipart/form-data请求 - 检查返回的图片访问路径是否有效 ### 建议解决方案: 1. 在前端项目根目录创建`.env`文件配置基础路径: ``` VUE_APP_IMAGE_BASE = http://api.yourdomain.com/uploads ``` 2. 后端增加默认头像处理逻辑: ```python # Flask示例 @app.route('/avatar/<filename>') def get_avatar(filename): if not os.path.exists(f'uploads/avatar/{filename}'): return send_file('static/default_avatar.png') return send_file(f'uploads/avatar/{filename}') ``` 3. 使用统一媒体服务(推荐): ``` // 前端访问地址 <img src="http://media-service/{{car.imagePath}}"> ``` **排查步骤总结:** 1. 浏览器F12查看具体报错 2. 检查网络请求实际URL 3. 验证后端能否直接访问该URL 4. 检查服务器文件系统权限 5. 确认数据库存储的是相对路径 建议提供以下具体信息以便进一步分析: - 浏览器控制台截图 - 图片请求的完整URL - 后端关于文件存储的配置代码片段 - 数据库存储图片路径的字段示例
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值