Angular部署Azure后HttpClient请求API返回404但本地运行正常

proxy.conf.json 是 Angular 本地开发服务器 @angular-devkit/build-angular:dev-server 的专属配置，仅在本地执行 ng serve 类命令时生效，生产构建生成的是纯静态前端资源，不会携带任何代理逻辑。你在 angular.json 生产配置下添加的 proxyConfig 仅作用于本地用生产配置启动开发服务的场景，对线上部署完全无效，这是导致线上请求404的根本原因。

• 首先确认后端接口的真实路径
  用Postman验证的可正常访问的接口地址如果是 https://{your-backend-domain}.azurewebsites.net/getData，说明后端接口没有 /api 前缀。线上前端请求的是 https://{domain}.azurewebsites.net/api/getData 多了 /api 前缀，和后端路径不匹配，直接触发404。

• 选择以下任意一种方案修复即可：

  方案1：通过Angular环境变量区分请求路径（最常用） #

  • 编辑生产环境配置文件 src/environments/environment.prod.ts，配置后端真实地址，去掉 /api 前缀：

  export const environment = {
    production: true,
    apiBaseUrl: 'https://{your-backend-domain}.azurewebsites.net'
  };
  

  • 编辑开发环境配置文件 src/environments/environment.ts，保留 /api 前缀适配本地代理：

  export const environment = {
    production: false,
    apiBaseUrl: '/api'
  };
  

  • 所有业务接口请求统一通过环境变量拼接路径，示例：

  import { environment } from '../environments/environment';
  // 调用接口
  this.http.get(`${environment.apiBaseUrl}/getData`);
  

  生产构建时会自动将路径替换为后端真实地址，不会携带多余的 /api 前缀。同时要确保后端Node.js服务已配置CORS，允许前端域名的跨域请求。

  方案2：在Angular所在的Azure Web App配置反向代理（无需改前端业务代码） #

  如果你希望线上也保持 /api 前缀的请求路径，可以在Azure Web App上配置重写规则，实现和本地代理一致的效果：

  • 在Angular项目的 src 目录下新建 web.config 文件，写入如下配置：

  <?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <!-- API代理规则：把/api开头的请求转发到后端，去掉/api前缀 -->
          <rule name="API Proxy" stopProcessing="true">
            <match url="^api/(.*)" />
            <action type="Rewrite" url="https://{your-backend-domain}.azurewebsites.net/{R:1}" />
          </rule>
          <!-- Angular路由规则：防止单页应用刷新404 -->
          <rule name="Angular SPA Routes" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

  • 修改 angular.json 配置，在 build -> options -> assets 数组中添加 src/web.config，确保构建时会把该文件打包到输出目录：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/web.config"
  ]
  

• 验证修复
  重新执行 ng build --configuration production 构建生产包，部署到Azure后刷新页面，检查请求路径与Postman验证的路径一致即可。

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