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

我正在尝试按照 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}`);
});

这就是在我的 proxy.conf.jsserve 部分中添加 angular.json 的方式:

"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 项目中 applicationUrl 文件的 launchSettings.json 条目中指定的端口匹配。以下是 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 身份验证一起使用这一事实有关,或者我在这里做错了什么?

stack overflow proxy.conf.js not working in ASP.NET Core app with Angular
原文答案

答案:

作者头像

尝试将您的 [Controller][Action] 显式添加到 proxy.config.js

像这样:

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

 module.exports = PROXY_CONFIG;
作者头像

我遇到了同样的问题。一个小时后,我记得 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
    }
}
作者头像

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

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

如果您查看默认项目中的 fetch-data-component ,您会看到它注入了一个 BASE_URL 。这个基本 url 使用角度应用程序侦听的端口。建议在您的服务中使用此 BASE_URL 并允许代理完成其工作。

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

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