使用.NET Core路由的Angular应用无法工作。

Question

使用.NET Core路由的Angular应用无法工作。

5

我使用这个指南创建了一个带有Angular的ASP.NET Core应用程序。它能正常工作，但是当我尝试向API中添加一个新的控制器时，它不允许我路由到该控制器操作。

这里是我的repo：https://github.com/rarDevelopment/rardk-web-dotnet/tree/main/rardk.web 关键信息： localhost：4200 是Angular应用程序 localhost:7042 是API 它们应该使用proxy.conf.js代理，但是即使我完全注释该文件，它仍然适用于WeatherForecastController。

以下是场景，以说明问题（尝试通过Postman，但Angular应用程序也在app.component.ts中调用这些端点）:

https://localhost:4200/weatherforecast -> 这可以工作

https://localhost:7042/weatherforecast -> 这可以工作

https://localhost:4200/api/now/letterboxd -> 这无法工作

https://localhost:7042/api/now/letterboxd -> 这可以工作

问题是：如果更改proxy.conf.js对新的端口没有影响（因为我还尝试将新路由添加到其中），那么是什么让WeatherForecast控制器在4200端口上工作，而其他东西则不工作？

编辑：添加代码片段以说明问题：

现在的控制器：

using Microsoft.AspNetCore.Mvc;
using rardk.web.BusinessLayer;

namespace rardk.web.API.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class NowController : ControllerBase
    {
        private readonly ILetterboxdBusinessLayer _letterboxdBusinessLayer;

        public NowController(ILetterboxdBusinessLayer letterboxdBusinessLayer)
        {
            _letterboxdBusinessLayer = letterboxdBusinessLayer;
        }

        [HttpGet("letterboxd", Name = "letterboxd")]
        public ActionResult GetLetterboxdFeed()
        {
            _letterboxdBusinessLayer.GetLetterboxdFeed();
            return Ok();
        }
    }
}

天气预报控制器（可用）：

using Microsoft.AspNetCore.Mvc;

namespace rardk.web.API.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class WeatherForecastController : ControllerBase
    {
        private static readonly string[] Summaries = new[]
        {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

        private readonly ILogger<WeatherForecastController> _logger;

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

        [HttpGet(Name = "GetWeatherForecast")]
        public IEnumerable<WeatherForecast> Get()
        {
            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
            })
            .ToArray();
        }
    }
}

proxy.conf.js（似乎没有任何作用）：

const PROXY_CONFIG = [
  {
    context: [
      "/test"
    ],
    target: "https://localhost:7042",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

- muttley91

4个回答

3

从Angular文档中，我们可以看到它使用webpack dev-server，后者又使用http-proxy-middleware。

在选项中，我们可以看到它使用glob匹配：

globstar：允许**自行作为名称组件，递归地匹配任意数量的非隐藏目录层。JS库和Python的glob也支持此功能。

因此，由于您正在使用

[Route("api/[controller]")]

如果您希望匹配任何嵌套的子文件夹（或路径），则您的上下文应该是/api/**，或者使用无嵌套的/api/*。

虽然我不知道为什么使用上下文 /test，WeatherForecast控制器却可以正常工作。

- david-ao

1

您可以尝试更改NowController中的路由前缀为[controller]，这意味着GetLetterboxdFeed操作的完整路由将为/now/letterboxd。然后，您可以更新proxy.conf.js文件，将其指向/api而不是/test。这样会将API代理正确到https://localhost:7042/api/now/letterboxd，应该就能正常工作了。

以下是带有新路由前缀的NowController的更新版本：

[ApiController]
[Route("[controller]")]
public class NowController : ControllerBase
{
    private readonly ILetterboxdBusinessLayer _letterboxdBusinessLayer;

    public NowController(ILetterboxdBusinessLayer letterboxdBusinessLayer)
    {
        _letterboxdBusinessLayer = letterboxdBusinessLayer;
    }

    [HttpGet("letterboxd", Name = "letterboxd")]
    public ActionResult GetLetterboxdFeed()
    {
        _letterboxdBusinessLayer.GetLetterboxdFeed();
        return Ok();
    }
}

proxy.conf.js文件：

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

module.exports = PROXY_CONFIG;

- 1SaeedSalehi

1

您需要了解 proxy.conf.js 文件。

特别是 context 键。从您提到的示例中，您将 https://localhost:4200/test 代理到了 https://localhost:7042/test。就这样。

- Bibek Khadka

是的，我理解这一点，但即使它说测试，为什么天气预报控制器仍然可以在两个端口上正确路由呢？ - muttley91

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ismi Ammar · Accepted Answer

我认为你忽略了API的代理设置，你所设定的配置未代理API端点。

这是我正在使用的配置：

const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:5001';

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
      "/_configuration",
      "/.well-known",
      "/Identity",
      "/connect",
      "/ApplyDatabaseMigrations",
      "/_framework",
      "/api",
      "/favicon.ico"
   ],
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  }
]

module.exports = PROXY_CONFIG;

通过代理 API 端点应该也能够访问这个地址。

https://localhost:4200/api/now/letterboxd