Angular中HttpClient调用时路径开头加与不加斜杠前缀有何区别

两种写法存在本质差异，最终发起请求的完整URL会有明显区别，具体规则如下：

1. 带斜杠前缀的写法（绝对路径） #

代码示例：

httpClient.get<Something>('/api/my/path'); // 带斜杠前缀

• 属于站点根路径相对的绝对路径写法，拼接时会直接基于站点的根部署路径计算，完全忽略当前页面的前端路由路径
• 举例：如果当前页面地址是 https://example.com/shop/user/orders，项目配置的base href为<base href="/shop/">，该请求最终的完整地址为 https://example.com/shop/api/my/path，无论你在哪个前端路由页面下发起该请求，地址都不会变化。

2. 不带斜杠前缀的写法（相对路径） #

代码示例：

httpClient.get<Something>('api/my/path'); // 不带斜杠前缀

• 属于当前路由路径相对的相对路径写法，拼接时会以当前页面的完整路由路径为基准
• 举例：如果当前页面地址是 https://example.com/shop/user/orders，该请求最终的完整地址为 https://example.com/shop/user/orders/api/my/path；如果当前页面路由切换到 https://example.com/shop/admin，请求地址就会变成 https://example.com/shop/admin/api/my/path，会随路由路径动态变化。

适用场景建议 #

如果是请求统一的后端接口，推荐使用带斜杠的写法，避免因为前端路由层级变化导致请求地址错误出现404问题；只有当你确实需要根据当前路由动态拼接请求路径时，才使用不带斜杠的写法。

内容的提问来源于stack exchange，提问作者Noy Oliel