Angular前端请求错误拼接API与本地URL返回404问题咨询

• 配置的API接口地址缺少http://或https://协议前缀，浏览器和Angular HttpClient会将不带协议头的地址识别为相对路径，自动拼接当前前端页面的源地址（本地开发环境即为http://localhost:4200），最终出现请求地址错误拼接本地服务前缀的问题。
• 之前运行正常是因为原有配置带完整协议头，后续修改配置时误删协议部分才会突发异常。当把API地址设为空字符串时，请求路径直接变为纯接口路径，依然属于相对路径范畴，自然还是会拼接本地服务地址，返回404。
• 注意：environment.ts配置修改后不会触发热更新，若修改后未重启开发服务，旧配置会持续生效，也会导致配置不生效的假象。

1. 修正environment.ts中的API地址配置，补全完整协议前缀，参考如下配置：

// 错误配置 缺少协议头 会被识别为相对路径
export const environment = {
  production: false,
  apiUrl: 'udagram-api-dev.eba-smxqzhkz.us-east-1.elasticbeanstalk.com/api/v0'
};

// 正确配置 带完整协议头 为绝对路径
export const environment = {
  production: false,
  apiUrl: 'https://udagram-api-dev.eba-smxqzhkz.us-east-1.elasticbeanstalk.com/api/v0'
};

2. 检查全局请求封装的地址拼接逻辑，确认拼接后生成的是完整绝对路径，不要额外给绝对路径增加多余前缀。如果需要将API地址设为空走本地代理，必须在项目根目录新增proxy.conf.json配置接口转发规则，否则请求会直接打到4200端口的前端静态服务，必然返回404。
3. 保存配置后，终止当前运行的ng serve进程，重新执行启动命令拉起开发服务，确保新配置生效。
4. 验证时打开浏览器开发者工具的Network面板，查看接口请求的Request URL，确认地址直接指向目标API服务、无http://localhost:4200前缀即为修复完成。

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