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

Posted 2023-02-19

【中文标题】Angular Service HttpClient API 在生产中请求 404，但不是在本地

【英文标题】：Angular Service HttpClient API requests 404 in production, but not locally

【发布时间】：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

【参考方案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