Angular 服务 HttpClient API 在生产环境中请求 404，但不是在本地

Question

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

发出请求时仅 returns 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." }

Answer 1

谢谢@Penleychan你的评论帮助很大。

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

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 命令来使用目标构建 configuration.Add 它到 angular.json 的“服务：配置”部分：

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

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

参考here

Angular 服务 HttpClient API 在生产环境中请求 404，但不是在本地

Angular Service HttpClient API requests 404 in production, but not locally

azure

node.js

azure-web-app-service

angular

webapi