.Net Core 3.1+Angular 8项目调用MVC API返回404如何解决

• 路由配置重复：你的PersonController已经标注了[Route("api/[controller]")]，意味着该控制器下所有接口的路由前缀默认是api/Person，你又在GetPeopleList方法上加了[Route("api/[controller]/[action]")]，两者叠加后接口的完整路由变成了api/Person/api/Person/GetPeopleList，和你Angular代码请求的路径不匹配。
• 端口不一致：Angular开发服务器和.NET Core API默认运行在不同端口，你现在请求直接发到了Angular的5001端口，该服务没有对应API路由，自然返回404。

1. 修正API路由配置 #

调整控制器代码，删除Action上多余的Route特性，直接在HttpGet中指定动作名即可：

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

    // 移除多余的Route特性，直接用HttpGet指定动作名
    [HttpGet("[action]")]
    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代码中请求的/api/Person/GetPeopleList。

2. 解决端口跨域问题 #

针对你用的Visual Studio官方ASP.NET Core + Angular混合模板，最简便的方法是配置开发代理：

• 先打开.NET Core项目根目录下的Properties/launchSettings.json，查看.NET API运行的https端口，比如是7001
• 找到ClientApp文件夹下的proxy.conf.js（没有就新建一个），配置内容如下：

const PROXY_CONFIG = [
  {
    context: ["/api"],
    target: "https://localhost:7001", // 替换成你自己的.NET API运行端口
    secure: false
  }
]
module.exports = PROXY_CONFIG;

• 确认ClientApp下的angular.json中，serve配置项已经引入了该代理文件：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "proxy.conf.js"
  },
  // 其他配置
}

修改后重启Angular开发服务，所有/api开头的请求会自动代理到.NET API的端口。

如果你不想用代理，也可以直接在Angular请求中写完整的API地址，同时在.NET Core的Startup.cs或者Program.cs中配置CORS允许跨域即可。

3. 验证接口有效性 #

修改完成后先直接在浏览器中访问.NET运行地址 + /api/Person/GetPeopleList，如果能正常返回人员列表的JSON数据，说明接口配置无误，再运行Angular项目测试调用即可。

内容的提问来源于stack exchange，提问作者Richard210363