proxy.conf.js 在带有 Angular 的 ASP.NET Core 应用程序中不起作用答案

【问题标题】：proxy.conf.js not working in ASP.NET Core app with Angularproxy.conf.js 在带有 Angular 的 ASP.NET Core 应用程序中不起作用
【发布时间】：2022-11-05 03:05:04
【问题描述】：

我正在尝试按照this 教程设置带有 Angular 前端的 ASP.NET Core 应用程序。我已经能够成功地创建项目，并且还能够完美地运行和调试它们。问题是由于某种原因，我无法将后端调用代理到 ASP.NET Core 后端工作。当我尝试从 Angular 应用程序调用控制器内部的操作时，我收到 404 错误。

这是我的 proxy.conf.js 文件：

const PROXY_CONFIG = [
  {
    context: [
      "/api/*",
    ],
    target: "https://localhost:7139",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

这是我为测试目的创建的TestController：

[Authorize]
[ApiController]
[Route("api/[controller]")]
public class TestController : ControllerBase
{
    private readonly ILogger<TestController> _logger;

    public TestController(ILogger<TestController> logger)
    {
        _logger = logger;
    }

    [HttpGet("{id}")]
    public string Get(int id)
    {
        return "Test response";
    }
}

这是我尝试从 Angular 应用程序中调用它的方式：

this.http.get<string>(`api/test/1`).subscribe((value) => {
  alert(value);
},
(error) => {
  alert(`Error: ${error.error}`);
});

这就是在我的angular.json 的serve 部分中添加proxy.conf.js 的方式：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "angularproject1.Client:build:production"
    },
    "development": {
      "browserTarget": "angularproject1.Client:build:development"
    }
  },
  "defaultConfiguration": "development",
  "options": {
    "proxyConfig": "src/proxy.conf.js"
  }
},

我已经检查了端口和proxy.conf.json，它确实与 ASP.NET Core 项目中launchSettings.json 文件的applicationUrl 条目中指定的端口匹配。这是launchSettings.json 文件的内容：

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": true,
    "anonymousAuthentication": false,
    "iisExpress": {
      "applicationUrl": "http://localhost:30959",
      "sslPort": 44345
    }
  },
  "profiles": {
    "WebApplication1": {
      "commandName": "Project",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:7139;http://localhost:5139",
      "dotnetRunMessages": true
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

这仍然不起作用的原因可能是什么？这是否与我试图让它与 Windows 身份验证一起使用这一事实有关，或者我在这里做错了什么？

【问题讨论】：

如果您使用 postman 或 curl 与您的 api 对话，它可以工作吗？如果是这样，您能否查看您的前端请求的确切 url 以查看它是否与 api 调用匹配？然后您可以确定它是 API 问题还是代理问题。我还建议使用 dotnet new webapp 生成一个新的空项目，以便您可以轻松比较差异，直到找到问题为止。另一件事，在这些情况下，使用 [AllowAnonymous] 之类的东西禁用身份验证很有用，但我怀疑这是问题所在，因为这应该返回 401/403
在这些情况下，创建一个最小的可重现示例也很有用，这样我们就可以自己运行代码
@S.tenBrinke 是的，如果我通过后端端口直接与 API 对话，它工作正常。但是，如果调用是通过 Angular Development Server 路由的，它永远不会到达后端。因此，我认为问题与代理有关。此外，这实际上是一个全新的项目，除了示例 TestController 之外没有任何其他内容。我什至还没有开始做任何其他事情，因为我仍在尝试设置这个项目。
@S.tenBrinke 我如何/在哪里可以提供示例？ Afaik，我需要为这两个项目提供整个解决方案，否则问题可能无法重现？
@S.tenBrinke 我刚刚从头开始创建了一个全新的解决方案，只是为了解决这个问题，似乎问题可能与我传递给控制器的附加 ID 参数有关。如果我删除 ID 参数并调用/api/test，我会得到一个有效的响应。为什么会发生这种情况，我如何允许它也将带有附加参数的请求传递给后端？

标签： c# asp.net angular asp.net-core angular13

【解决方案1】：

尝试添加您的[控制器][动作]明确地进入proxy.config.js

像这样：

const PROXY_CONFIG = [
{
   context: [
   "/api/Test/Get", 
  ],
  target: "https://localhost:7139",
  secure: false
 }
 ]

 module.exports = PROXY_CONFIG;

【讨论】：

【解决方案2】：

我遇到了同样的问题。一个小时后，我记得 Angular 使用 ** 作为包罗万象，而不是 *。

const PROXY_CONFIG = [
  {
    context: [
      "/api/**",
    ],
    target: "https://localhost:7139",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

如果 proxy.conf.js 文件的格式与 json 文件相同，我认为您可以使用单个 *。像这样：

{
  "/api/*": {
    "target": "https://localhost:7139",
    "secure": false
  }
}

【讨论】：

【解决方案3】：

我在 Ubuntu 上使用 VS Code 时遇到了同样的问题。我需要做的就是将我的PROXY_CONFIG 的context 条目更新为["/api/**"]，然后我可以将所有控制器更改为使用/api/ 前缀进行路由。

使用代理的原因是您的 dotnet 应用程序在一个端口上运行，而您的 Angular 应用程序在另一个端口上运行。当您按下 F5 时，VS Code 将启动这两个应用程序，并通过角度端口加载 UI。

如果您查看默认项目中的fetch-data-component，您会看到它注入了BASE_URL。此基本 url 使用 angular 应用程序侦听的端口。

因此，例如像 [angular app]+/api/customers 这样的请求需要解析到 dotnet 应用程序，这就是 proxy.conf.js 的目的。

为了区分 agular 路由和 dotnet api 路由，PROXY_CONFIG 中的 context 值用于触发到 dotnet 应用程序的重定向。这就是 /api/** 出现的地方，因为 Angular 使用 **-wildcard 捕获所有以 api-前缀开头的传入 url，然后将它们重定向到 target 值。

【讨论】：