http 路径解析规则，相对路径和绝对路径

http 路径解析规则

为什么相对路径会被浏览器自动拼接当前页面路径？

• 这是 HTTP/HTML 规范 规定的行为，目的是让开发者可以更方便地引用资源，而不必每次都写完整的绝对路径。它的核心逻辑是：相对路径是基于当前页面的 URL 路径解析的。

绝对路径

特征：

• 以 http://、https:// 或 //（协议相对 URL）开头
• 包含完整的 协议 + 域名 + 路径

示例：

"http://bob.com/api/data";
"https://api.bob.com/v1/users";
"//cdn.bob.com/image.jpg"; // 协议相对（自动继承当前页面的协议）

相对路径

特征：

• 不以 http://、https:// 或 // 开头
• 可能以 ./、../ 或直接写路径（如 images/logo.png）

示例：

"api/data"; // 相对于当前路径
"./config.json"; // 相对于当前目录
"../utils/helper.js"; // 相对于上一级目录
"/static/logo.png"; // 根相对路径（基于域名根目录）

相对路径的解析规则

• 浏览器（或 HTTP 客户端）在解析相对路径时，会按照以下规则拼接：

1. 以 / 开头 → 基于 根路径 （域名根目录）
   • /api/data → http://当前域名/api/data
2. 以 ./ 开头 → 基于 当前路径
   • ./data → http://当前域名/当前路径/data
3. 以 ../ 开头 → 基于 上一级目录
   • ../data → http://当前域名/上一级路径/data
4. 直接写路径(和写./ 效果一样)（无 / 或 ./） → 基于 当前路径
   • data → http://当前域名/当前路径/data

---

当前页面 URL

http://localhost:9001/app-dev/bob-mobile-v4/pages/goods

请求的 URL

url: `decorate/get-bob-list`;

浏览器解析过程

1. 当前路径是 /app-dev/bob-mobile-v4/pages/goods

2. 请求的是 decorate/get-bob-list（无 / 或 ./ 前缀）

3. 浏览器自动拼接：

   http://localhost:9001/app-dev/bob-mobile-v4/pages/hall/decorate/get-bob-list

   • 因为 demand-collect 是当前路径，decorate/get-bob-list 被视为它的子路径。

---

为什么绝对路径不会拼接？

绝对路径已经包含完整的 协议（http://）+ 域名 + 路径，浏览器不会额外拼接当前路径：

url: `http://localhost:9001/eshopdev/api/decorate/get-bob-list`;

• 浏览器直接使用这个 URL，不会修改它。

---

为什么 HTTP 规范要这样设计？

1. 灵活性 ：开发者可以写短路径，减少代码冗余。
   • 比如 <img src="images/logo.png"> 会自动补全为完整路径。
2. 可移植性 ：
   • 如果网站从 http://bob.com 迁移到 http://new.bob.com，相对路径仍然有效，而绝对路径需要修改。
3. 目录结构映射 ：
   • 服务器上的文件目录结构可以直接映射到 URL 路径，方便管理。

---

如何避免意外拼接？

方法	示例	解析结果
绝对路径	http://localhost:9001/api/data	直接使用，不拼接
根相对路径 （以 / 开头）	/api/data	http://当前域名/api/data
配置 baseURL（推荐）	axios.defaults.baseURL = 'http://localhost:9001/api'	自动补全

推荐做法

// 1. 配置 baseURL（如 Axios）
axios.defaults.baseURL = "http://localhost:9001/eshopdev/api";

// 2. 使用时只写端点路径
axios.get("/decorate/get-bob-list");
// → http://localhost:9001/eshopdev/api/decorate/get-bob-list

常用window.open参数

---

1. 基本语法

window.open(url, target, windowFeatures);

• url：要加载的URL地址（字符串）
• target：指定打开方式（字符串）
• windowFeatures（可选）：窗口特性（如尺寸、工具栏等）

---

2. '_parent' 参数的作用

'_parent' 表示 在当前窗口的父级框架（如果有）中打开链接，具体行为取决于页面结构：

场景	'_parent' 的行为
页面无框架	等同于在当前窗口打开（和 '_self' 效果相同）
页面嵌套在 <iframe> 中	在直接包含当前框架的父级窗口/框架中打开（跳过一层嵌套）
多层嵌套框架	只向上查找一级父框架

---

3. 对比其他 target 值

target 值	作用
'_blank'	在新窗口/标签页打开（默认行为）
'_self'	在当前窗口打开（替换当前页面）
'_parent'	在父级框架中打开（如上所述）
'_top'	在最顶层窗口打开（跳出所有框架）
'framename'	在指定名称的 <iframe> 中打开

---

4. 实际示例

(1) 普通页面（无框架）

<button onclick="window.open('/quotation/detail', '_parent')">
  在当前窗口打开
</button>

效果：点击后当前窗口会跳转到 example.com（等同 '_self'）。

(2) 嵌套框架页面

<!-- 父页面 -->
<iframe src="child.html"></iframe>

<!-- child.html 子页面 -->
<script>
  window.open('/quotation/detail', '_parent');
</script>

效果：链接会在父页面（而非iframe内）打开。

---

5. 注意事项

1. 浏览器拦截：

   • 大多数浏览器会拦截非用户触发的 window.open()（如异步调用中）。
   • 解决方案：确保在按钮点击等用户直接操作中调用。

2. 同源策略：

   • 如果父子窗口不同源（协议/域名/端口不同），某些操作可能被限制。

3. 返回值：

   • window.open() 返回新窗口的引用（可用于后续控制）：

     const newWindow = window.open('/quotation/detail', '_parent');

4. 现代替代方案：

   • 优先使用 <a> 标签的 target 属性：

     <a href="/quotation/detail" target="_parent">打开链接</a>

总结

• 相对路径会被拼接，因为 HTTP/HTML 规范规定它基于当前路径解析。
• 绝对路径不会拼接，因为它已经是完整路径。
• 最佳实践 ：使用 baseURL 或环境变量管理 API 路径，避免硬编码。

类型	特征	示例	解析方式
绝对路径	以 http:// 或 https:// 开头	https://bob.com/api	直接使用
协议相对路径	以 // 开头	//cdn.bob.com/jquery.js	继承当前页面协议
根相对路径	以 / 开头	/api/data	基于域名根目录拼接
相对路径	以 ./、../ 或无前缀	../utils.js、api/data	基于当前页面路径拼接