Angular Service HttpClient API 在生产中请求 404，但不是在本地答案

【问题标题】：Angular Service HttpClient API requests 404 in production, but not locallyAngular Service HttpClient API 在生产中请求 404，但不是在本地
【发布时间】：2022-01-07 15:42:17
【问题描述】：

我有一个 Angular Web 应用程序和一个后端 Node JS API，它们都托管在 Azure 中的 Web 应用程序中。我使用邮递员来验证 API 是否正常运行。我的本地开发版本的 Angular 应用程序目前也指向实时 API，并且请求按预期工作。但是，已部署的 Angular App 在向 API 发出请求时仅返回 404。

我有以下proxy.confg.json：

{
"/api/*" : {
    "target" : "https://{domain}.azurewebsites.net",
    "pathRewrite": {
        "^/api" : ""
    },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
}

我在 angular.json 中配置了用于生产构建的代理，如下所示：

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "{project}:build:production",
          "proxyConfig" : "proxy.conf.json"
        }

当使用 proxy.confg.json 在本地运行时（“ng serve”和“ng serve --configuration production”，API 请求按预期工作。但是，实时应用程序在浏览器控制台中显示以下两个错误：

XHR GET https://{domain}.azurewebsites.net/api/getData
Object { headers: {…}, status: 404, statusText: "Not Found", url: "https://{domain}.azurewebsites.net/api/getData", ok: false, name: "HttpErrorResponse", message: "Http failure response for https://{domain}.azurewebsites.net/api/getData: 404 Not Found", error: "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable." }

【问题讨论】：

proxy 旨在在运行开发服务器 (ng serve) 时用于代理调用。所以基本上代理配置（proxy.config.json）严格来说只是为了本地开发。
如果是这种情况，您应该如何将 HttpClient 指向外部后端 URL？使用代理配置是文档中提到的唯一方法
angular.io/guide/build

标签： node.js angular azure azure-web-app-service webapi

【解决方案1】：

谢谢@Penleychan你们的cmets帮了大忙。

当您尝试将开发部署到生产环境时，您必须配置环境特定的默认值

Angular 项目src/environments/ 文件夹包含基本配置文件environment.ts，它提供了一个默认环境。您可以在特定于目标的配置文件中为其他环境添加覆盖默认值，例如生产环境 (environment.prod.ts) 和暂存环境 (environment.stage.ts)。

在您的 environment.prod.ts 环境文件中，您可以添加默认环境值

export const environment = {
    production: true,
    apiUrl: 'http://my-prod-url'
};

在您的组件中使用环境配置，您需要导入原始环境文件：

import { environment } from './../environments/environment';

配置特定目标文件替换。默认情况下不替换任何文件。您可以在 angular.json``: 中为特定构建目标添加文件替换

"configurations": {
    "production": {
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        }
        ],
    
    ...

如果您使用serve 命令来使用目标构建配置。将其添加到angular.json 的“serve:configurations”部分：

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
    "browserTarget": "your-project-name:build"
},
"configurations": {
    "production": {
        "browserTarget": "your-project-name:build:production"
    }
    }
},

你已经完成了。因此，一旦您添加了特定于环境的配置，您就可以解决问题

参考here

【讨论】：