Angular自定义host启动时assets资源仅localhost可访问的问题

问题根因 #

你代码中请求assets资源时硬编码了localhost:4200前缀，Angular CLI的ng serve命令默认不会自动替换代码中写死的请求域名，导致资源请求地址和实际应用运行地址不匹配。同时你开启了SSL访问，报错中请求走了http协议，也会触发浏览器混合内容拦截规则。

修复方案 #

• 方案1（最推荐，适配所有环境）：将资源请求路径改为相对根路径
  把代码中硬编码的http://localhost:4200/assets/xxx格式的路径，直接改为/assets/xxx即可。浏览器会自动拼接当前页面的协议、域名、端口作为前缀，无需额外配置，本地开发、局域网调试、生产部署都通用。
• 方案2（适配多环境差异化配置）：通过Angular环境变量管理资源前缀
  在src/environments/environment.ts（开发环境配置文件）中添加资源前缀配置：

  export const environment = {
    production: false,
    assetBaseUrl: 'https://192.168.1.14:4200'
  };
  

  请求资源时拼接该前缀：

  const url = `${environment.assetBaseUrl}/assets/i18n/pl.json`;
  

  生产环境只需要修改对应environment.prod.ts里的配置即可。
• 方案3（临时调试无需改代码）：添加--public-host启动参数
  修改启动命令，指定运行时公共地址，Angular CLI会自动替换内置资源路径的前缀：

  ng serve --host 192.168.1.14 --disable-host-check --ssl true --ssl-cert ./192.168.1.14.pem --ssl-key ./192.168.1.14-key.pem --public-host 192.168.1.14:4200
  

注意事项 #

修改完成后确认所有assets资源的请求协议为https，和应用访问协议保持一致，避免被浏览器拦截。

内容的提问来源于stack exchange，提问作者Michał B