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

Posted 2023-04-01

【中文标题】带有 MVC 的 Angular CLI 从 API 调用返回 404

【英文标题】：Angular CLI with MVC returning 404 from API call

【发布时间】：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 PersonId = 1, Name = "Scott",
               new PersonId = 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

【参考方案1】：

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

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