ASP.Net Core Web API URL 调用被重新路由到 Angular 项目

Question

我有一个使用 Visual Studio 2022 版本 17.9.0 的 ASP.Net Core 8 和 Angular 17 项目。

我正在使用新的“Angular 和 ASP.Net Core”项目模板。我只是有一个问题很固执。 我正在按照 Packt 的书构建一个名为 WorldCities 的项目。

到目前为止，这还很基本。 在 Angular 方面，我只有 app.component.html 包含一个 NavMenu 组件和一个 router-outlet 标签来保存路由的适当组件。

<app-nav-menu></app-nav-menu>
<div class="container">
   <router-outlet></router-outlet>
</div>

在 app-routing.module.ts 中，我只有一个默认 Home 组件的路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我注意到 Angular 17 中的一些新东西。应用程序路由模块开箱即用，您不必再将其注册到根模块中。已经完成了。所以我只是添加了 Home 组件路由。

这是我的 launch.json，因此 Angular 项目正在端口 4200 上运行。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "localhost (Chrome)",
      "url": "https://localhost:4200",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "edge",
      "request": "launch",
      "name": "localhost (Edge)",
      "url": "https://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

这是我在 proxy.config.js 中的一个通用 API 规则

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

module.exports = PROXY_CONFIG;

因此，如果 Angular 应用程序调用任何 API，它应该能够找到它。 但我什至还没有使用这个。我只有一个带有 URL 的 Web API 控制器，我直接在浏览器中输入该 URL 来为我将要访问的数据库播种。

在 ASP.Net Core Web API 端，在 launchSettings.json 中，以下是 https 配置文件配置：

"https": {
  "commandName": "Project",
  "dotnetRunMessages": true,
  "launchBrowser": false,
  "launchUrl": "swagger",
  "applicationUrl": 
"https://localhost:40443;http://localhost:40080",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development",
    "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": 
"Microsoft.AspNetCore.SpaProxy"
  }
}

然后我有带有 api 路由和导入操作的 SeedController 类。

[Route("api/[controller]/action")]
[ApiController]
public class SeedController : ControllerBase
{
    private readonly ApplicationDbContext _context;
    private readonly IWebHostEnvironment _env;

    public SeedController(
        ApplicationDbContext context,
        IWebHostEnvironment env
        )
    {
        _context = context;
        _env = env;
    }

    [HttpGet]
    public async Task<ActionResult> Import()
    {
        // seed code here
    }
}

当我运行该项目时，Angular Live Development Server 正在一个控制台中运行：

ASP.Net Core Web API 项目由 Kestrel 在另一个控制台托管。

主页组件与 NavMenu 组件一起加载到浏览器中（使用 Angular Material）

所以，问题来了。 当我打开浏览器播种数据库并输入 URL 时：

https://localhost:40443/api/Seed/Import

我收到了 404。

还有一些其他奇怪的行为。

如果我只是输入 localhost:40443:

它会重新路由回 Angular 应用程序。 它绝对不应该这样做。是什么导致了这种行为？

当我构建这个时，我发现了开箱即用的示例天气预报 API 的这个问题，并认为我已经以某种方式修复了它，只是为了让一切正常工作并测试 Angular API 代理规则，我认为我以某种方式让它工作。我不记得出了什么问题。然后我把所有天气预报的东西都撕掉了，因为不需要了。现在这个烦人的问题又回来了。 以前有人遇到过这个问题并解决了吗？ 否则我必须重新开始这 77 页的章节，看看是否能成功。这有点令人困惑，因为作者在本书前面构建了一个名为 HealthChecks 的应用程序，然后告诉您只需重复构建 WorldCities 的步骤。他提到了所有步骤，但没有引用页码，而且他提到的步骤与 HealthChecks 的实际构建有点不相符。

Answer 1

在您的

SeedController

中，当您调用

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

时，您的路线定义为

localhost

，您在您的情况下使用

https://localhost:40443/api/Seed/Import

，它应该是

https://localhost:40443/api/Seed/action/Import