Angular SSR启用SSL后HttpClient请求相对URL异常问题

启用SSL后请求相对URL出现https://undefined/assets/test.json，核心原因是HTTP客户端的基础URL（baseURL）在SSL环境下未正确配置，导致相对路径拼接时缺少域名/主机部分，直接出现了undefined。

以下是几种可靠的处理方式：

1. 动态配置baseURL适配协议 #

不管是否启用SSL，让HTTP客户端自动适配当前环境的协议与域名，避免硬编码：

// 以Axios为例，其他HTTP客户端（如Angular HttpClient）逻辑类似
const httpClient = axios.create({
  baseURL: window.location.origin // 自动获取当前页面的「协议+域名+端口」
});

// 调用相对路径时会自动拼接正确URL
httpClient.get('assets/test.json');

window.location.origin会自动识别当前是HTTP还是HTTPS环境，动态生成合法的基础地址，彻底避免协议不匹配或地址缺失问题。

2. 使用根相对路径 #

如果不想依赖baseURL配置，直接用以/开头的根相对路径，确保从网站根目录定位资源：

httpClient.get('/assets/test.json');

这种方式会基于当前页面的协议+域名+端口，自动拼接成https://your-domain.com/assets/test.json（SSL环境下），不会出现undefined。

3. 检查环境变量配置 #

如果项目用环境变量管理地址，需确保SSL环境下的变量正确设置：

# .env文件示例
# 开发环境（HTTP）
VITE_BASE_URL=http://localhost:3000

# 生产/SSL环境（HTTPS）
VITE_BASE_URL=https://your-production-domain.com

初始化HTTP客户端时读取该变量：

const httpClient = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL
});

• 避免硬写固定协议（如http://），优先用动态获取或环境变量适配不同部署环境
• 非根相对路径（不以/开头）会基于当前页面路径拼接，可能出现层级错误，建议统一使用根相对路径或配置baseURL

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