ASP.NET Core 应用程序中的 Angular，proxy.conf.js 无法工作

Question

我正在尝试按照此教程设置一个带有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身份验证使其工作，还是我在做错了什么？

- Chris

---

在这些情况下，创建一个最小可重现的示例也会很有用，这样我们就可以自己运行代码。 - S. ten Brinke

@S.tenBrinke 又来更新一下：显然我之前说的不是唯一的问题。在我刚刚从头开始创建的新解决方案中，我至少可以获得没有ID的API调用。但是在我的实际项目中，即使没有ID，它也无法正常工作。相反，我会收到一个400错误的坏请求，而且没有任何关于请求出了什么问题的进一步信息。我开始真的想不出这里到底发生了什么。对于只返回字符串的简单GET请求，我遇到这么多麻烦，这真的毫无意义。 - Chris

@Chris 我和你的情况完全一样，同样的教程等等... 教程中的默认 /weatherforecast 调用可以正常工作，但是当我尝试基于 /api/* 的 API 调用时，我得到了一个 404 错误。我的配置与你完全相同。当我在后端尝试时，它可以正常工作。你找到解决方案了吗？ - Sylvain C.

@Chris 谢谢您的反馈。我已经尝试在proxy.conf.js中使用"/api/*"，但目前还没有成功。我会继续探索。 - Sylvain C.

@SylvainC。我本意是尝试/api，而不是/api/*，你也试过了吗？ - Chris

Answer 1

我遇到了同样的问题。一个小时后，我想起了Angular使用**作为catch all而不是*。

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
  }
}

- Dinomar

Answer 2

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

代理的原因是你的dotnet应用程序运行在一个端口上，而你的angular应用程序运行在另一个端口上。当你按下F5键时，VS Code会启动两个应用程序，并通过angular端口加载UI。

如果你查看默认项目中的fetch-data-component，你会发现它注入了一个BASE_URL。这个基本URL使用了angular应用程序监听的端口。建议在你的服务中使用这个BASE_URL，并允许代理完成它的工作。

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

为了区分Angular路由和Dotnet API路由，PROXY_CONFIG中的context值用于触发重定向到Dotnet应用程序。这就是/api/**的作用，因为Angular使用**通配符来捕获所有以api前缀开头的传入URL，然后将它们重定向到target值所指定的位置。

- Zahir J

---

顺便提一下，您可以直接通过dotnet应用程序和angular应用程序调用控制器方法，因为angular应用程序会将您的流量反向代理到dotnet应用程序。 - Zahir J

Answer 3

我遇到了同样的问题（ASP.NET Core 6 / Angular），我通过使用“/api/”来简单地解决了它。

const PROXY_CONFIG = [
  {
    context: [
      "/api/" // <---
    ],
    target: target,
    secure: false
  }
]

不要忘记相应地更改您的控制器路由。

- Kino101

Answer 4

在我的情况下，我必须重新启动dotnet watch run来重新启动代理。

- Reza Abolfathi

Answer 5

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

像这样：

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

 module.exports = PROXY_CONFIG;

- Farukh