本地访问资源 vs 互联网访问资源

前置思考

我们习惯于在浏览器中访问互联网资源，却鲜有关注过浏览器也可以访问本地资源，并去思考：浏览器访问资源的规则是什么？又如何区别本地与互联网资源？

互联网访问资源（典型情况）

• 浏览器访问 URL（例如 http://www.example.com/profile.php）

• 网络协议栈：应用层 HTTP → 传输层 TCP → 网络层 IP → 链路层

• TCP/IP 负责：

  1. 找到目标服务器（IP 地址）
  2. 建立可靠连接（三次握手）
  3. 数据传输完整性、顺序

• HTTP 负责：

  1. 请求方法（GET/POST）
  2. 请求头/响应头
  3. 内容传输（HTML、JSON、图片等）

---

本地访问资源（localhost / 文件系统）

1. 静态文件直接打开

• 过去甚至现在，你可以直接在浏览器中打开本地 HTML 文件：

file:///C:/Projects/demo/index.html

• 特点：

  • 没有 TCP/IP
  • 没有 HTTP（严格来说浏览器内部仍有协议解析，但没有网络传输）
  • 浏览器直接读取磁盘文件 → 渲染页面

⚠️ 限制：

• JS 如果想访问其他本地文件或做 Ajax 请求，会受 浏览器同源策略 限制。

---

2. 本地服务器运行

• 当项目有动态逻辑（PHP、Node.js 等）时，本地就需要模拟服务器环境：

  • 例如：http://localhost:8080

• 机制：

  1. 本地启动服务器（Apache/XAMPP/Nginx/Node.js）
  2. 服务器监听本地端口（如 80、8080）
  3. 浏览器访问 localhost → 通过 TCP/IP（环回接口 127.0.0.1）连接服务器
  4. 服务器处理请求（可能访问本地数据库、文件等）
  5. 返回响应 → 浏览器渲染

• 优势：

  • 保持和线上环境一致（HTTP 协议、动态逻辑）
  • 支持数据库访问、模板渲染、AJAX 等

---

过去 vs 现在的本地访问区别

时间	本地访问方式	数据/逻辑访问	协议/端口
静态时代	file:// 直接打开 HTML	HTML+CSS 文件	无 TCP/IP，无 HTTP
动态时代（2000s）	本地服务器（Apache+PHP）	PHP 脚本访问数据库或文件	HTTP/TCP/IP 本地环回（localhost:80）
现代开发	本地 Node.js/Vite/webpack-dev-server	JS 访问本地 JSON / API /数据库	HTTP/TCP/IP 环回（localhost:端口）

---

核心理解

• 互联网访问资源 → 必须通过 TCP/IP + HTTP 访问远程服务器

• 本地访问资源

  • 静态文件：直接读取磁盘，无网络传输
  • 动态项目：通过本地服务器模拟 HTTP/TCP/IP 流程，逻辑和网络协议和线上几乎一样

• 因此，即便项目在本地，逻辑代码访问本地资源也通常依赖 本地服务器 来处理请求和返回响应