带有 MVC 的 Angular CLI 从 API 调用返回 404答案

【问题标题】：Angular CLI with MVC returning 404 from API call带有 MVC 的 Angular CLI 从 API 调用返回 404
【发布时间】：2022-01-12 16:14:51
【问题描述】：

我正在开发一个组合的 .Net Core 3.1、Angular 8 项目。

Angular 代码嵌入在包含 MVC 代码的 Visual Studio 项目中，位于 ClientApp 文件夹下

我对 .Net 很好，但 Angular 对我来说是 2 天前的新手。

我正在尝试让 Angular 代码调用 MVC API

我一直在关注一些视频和教程，我想出了这个作为一种概念证明。

角度代码

import { Component, OnInit } from "@angular/core";
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'people-list',
  templateUrl: "peopleListView.component.html"
})

export class PeopleListView implements OnInit {

  constructor(private http: HttpClient) { }
  
  ngOnInit() {
    let test = "";
    test = "/api/Person/GetPeopleList";
    this.http.get(test).subscribe((data: any) => console.log(data), (err: any) => console.log(err));
  }

MVC 代码

[ApiController]
[Route("api/[controller]")]
public class PersonController : Controller
{
    public PersonController()
    {
    }

    [Route("api/[controller]/[action]")]
    [HttpGet]
    public List<Person> GetPeopleList()
    {
        List<Person> people = new List<Person>{
               new Person{Id = 1, Name = "Scott"},
               new Person{Id = 2, Name = "Bill"}
               };

        return people;
    }
}

我可以看到 Angular 代码上的断点被命中，因此我之前的 Angular 代码正在运行，但 GetPeopleList() 方法没有被命中，并且出现 404 错误。

我在路线上尝试了许多变化，例如[Route("api/[controller]]")] 但无济于事。

我哪里出错了？

更新看到我的代码正在请求localhost:5001/api/Person/GetPeopleList 我想知道 API 是否实际上位于端口 5001 上，因为它由 Angular 应用程序控制。

【问题讨论】：

连接它的网站地址 http://yoursite//api/Person/GetPeopleList 用于测试变量还查看网站开发工具，它在什么地址请求
我可以从控制台日志中看到请求的 URL 是：localhost:5001/api/Person/GetPeopleList。所以网站地址会被自动连接。
哦，知道了，而不是 [] 使用 {} 用于控制器上的路由
据我所知，[] 是使用令牌替换时的正确约定。我尝试改用 {}，但它也不起作用。我删除了令牌并使用了明确的路线 [Route("api/test/GetPeopleList")] 和 [Route("api/test")]。它们也不起作用，我仍然得到 404。
尝试启用 CORS

标签： c# angular asp.net-mvc

【解决方案1】：

您必须通过在开头添加“~/”来修复路线。表示路由从路由开始，你当前的路由需要".../api/person/api/person/getPeolelist" url

 [Route("~/api/Person/GetPeopeList")]
 public List<Person> GetPeopleList()

【讨论】：