Angular前端调用Azure后端API时URL拼接异常问题求助

问题核心 #

请求URL被错误拼接为前端域名下的相对路径，本质原因是环境变量apiBaseUrl的配置格式不正确，导致Angular将其识别为相对路径而非完整绝对URL。

解决方案 #

1. 修正环境变量配置

打开生产环境配置文件environment.prod.ts，确保apiBaseUrl是带完整协议头（https://）的绝对URL，不能省略协议头：

export const environment = {
  production: true,
  apiBaseUrl: 'https://myservice.azurewebsites.net' // 必须包含https://
};

若配置时仅写myservice.azurewebsites.net，Angular会默认将其当作前端域名下的相对路径，最终拼接出错误URL。

2. 优化URL拼接逻辑（可选，增强健壮性）

当前模板字符串拼接可能出现双斜杠问题（比如apiBaseUrl末尾带斜杠时），可用数组join方法规避这类问题：

getAllBlogPosts(): Observable<BlogPost[]> {
  // 用join自动处理斜杠，避免重复或缺失
  const requestUrl = [environment.apiBaseUrl, 'api', 'blogpost'].join('/');
  return this.httpClient.get<BlogPost[]>(requestUrl);
}

3. 确认生产构建使用正确配置

构建生产环境时，务必指定使用生产环境配置：

• Angular 12及更早版本：ng build --prod
• Angular 13+：ng build --configuration production

构建完成后，可检查产物中的main.*.js文件，搜索apiBaseUrl确认配置值是否正确加载，避免构建时误用开发环境配置。

4. 额外排查

• 清除浏览器缓存：旧配置可能被缓存，导致新配置无法生效，强制刷新页面（Ctrl+F5）或清除缓存后测试。
• 验证Azure CORS配置：确认Azure应用服务的CORS设置已包含前端域名https://myui.web.app，并允许对应的HTTP方法（如GET）。

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