ASP.NET Core MVC中无法访问控制器方法的问题求助

问题现象 #

React客户端调用UserController接口时持续返回HTTP 404错误；调用GET接口时返回前端index.html模板，仅默认的WeatherForecast控制器能正常工作。

相关代码 #

UserController代码 #

using Microsoft.AspNetCore.Mvc;

namespace xx.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class UserController : ControllerBase
    {
        // GET: api/<UserController>
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/<UserController>/5
        [HttpGet("{id}")]
        public string Get(int id)
        {
            return "value";
        }

        // POST api/<UserController>
        [HttpPost]
        public string Post([FromBody] User value)
        {
            return (value.Username.ToString());
        }

        // PUT api/<UserController>/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody] string value)
        {
        }

        // DELETE api/<UserController>/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

React客户端调用代码 #

function login() {
    var data = {
        username: username,
        password: password,
    };
    $.ajax({
        type: "POST",
        url: 'api/user',
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify(data),
        success: function (result) {
            console.log(result);
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

Program.cs代码 #

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapControllerRoute(
    name: "api",
    pattern: "api/{controller}/{action=Index}/{id?}"
    );

app.MapFallbackToFile("index.html");

app.Run();

setupProxy.js代码 #

const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');

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

const context =  [
    "/weatherforecast",
    "/user"
];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });

  app.use(appProxy);
};

问题原因 #

1. 路由配置冲突：Program.cs中自定义的api路由模板与UserController上的[Route("api/[controller]")]属性重复定义，导致路由匹配逻辑混乱。
2. 代理路径不匹配：setupProxy.js中仅配置了/user路径，但React实际请求的是/api/user，代理未转发该请求到后端API。
3. 回退路由捕获API请求：MapFallbackToFile("index.html")会将所有未匹配的路由转发到前端页面，当API路由匹配失败时就会返回index.html。

解决方案 #

1. 清理冗余路由配置 #

删除Program.cs中自定义的api路由映射，因为控制器已通过属性定义了API路由：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

// 仅保留默认MVC路由，API路由由控制器属性控制
app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html");

app.Run();

2. 修正代理配置路径 #

更新setupProxy.js的context数组，包含完整的API前缀路径，或者使用通配符匹配所有API请求：

const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');

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

// 匹配所有/api开头的路径，更通用
const context =  ["/api/**"];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });

  app.use(appProxy);
};

3. 确保User类已定义 #

UserController的Post方法依赖User类，需在项目中添加该模型类：

namespace xx.Models
{
    public class User
    {
        public string Username { get; set; }
        public string Password { get; set; }
    }
}

并在UserController中引用该类：

using xx.Models;

4. 验证API可用性 #

先通过Postman或浏览器直接访问https://localhost:<你的端口>/api/user，确认后端API能正常响应，排除后端问题后再测试React客户端调用。

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