Vue.js调用ASP.NET Core Products接口报404，控制器未触发

问题场景 #

前端Vue的axios请求代码：

getProducts() {
     this.loading = true;
     axios.get('/Products')
         .then(res => {
             console.log(res);
             this.products = res.data;
         })
         .catch(err => {
             console.log(err);
         })
         .then(() => {
             this.loading = false;
         });
 },
 createProduct() {
     this.loading = true;
     axios.post('/Products', this.productModel)
         .then(res => {
             console.log(res.data);
             this.products.push(res.data);
         })
         .catch(err => {
             console.log(err);
         })
         .then(() => {
             this.loading = false;
             this.editing = false;
         });
 }

后端ProductsController代码：

[Route("[controller]")]
[Authorize(Policy = "Manager")]
public class ProductsController : Controller
{
    private ApplicationDbContext _ctx;

    public ProductsController(ApplicationDbContext ctx)
    {
        _ctx=ctx;
    }

    [HttpGet("")]
    public IActionResult GetProductsAdmin() => Ok(new GetProductsAdmin(_ctx).Do());

    [HttpGet("{id}")]
    public IActionResult GetProduct(int id) => Ok(new GetProduct(_ctx).Do(id));

    [HttpPost("")]
    public async Task<IActionResult> CreateProduct([FromBody] CreateProduct.Request request) => Ok(await new CreateProduct(_ctx).Do(request));

    [HttpDelete("{id}")]
    public async Task<IActionResult> DeleteProduct(int id) => Ok(await new DeleteProduct(_ctx).Do(id));

    [HttpPut("")]
    public async Task<IActionResult> UpdateProduct([FromBody] UpdateProduct.Request request) => Ok(await new UpdateProduct(_ctx).Do(request));
}

核心问题：发起Get/Post请求时返回404，控制器Action未被断点命中，相同逻辑的StockController可正常运行。

排查与解决步骤 #

1. 验证控制器命名与路由基础配置 #

• 确认ProductsController类名后缀为Controller（ASP.NET Core路由依赖此规则识别控制器），对比StockController的命名格式是否一致。
• 检查[Route("[controller]")]注解是否正确，StockController若使用相同路由规则，确认ProductsController未遗漏该注解。

2. 排查授权策略影响 #

• ProductsController添加了[Authorize(Policy = "Manager")]限制，而StockController可能无此配置。临时注释该注解，重新测试请求：
  • 若请求正常命中Action，说明当前用户不符合"Manager"策略要求，或前端未携带有效认证令牌（如JWT）。
  • 注意：ASP.NET Core部分配置下，授权失败可能返回404而非标准的401/403。

3. 检查请求URL与代理配置 #

• 打开浏览器开发者工具的Network面板，查看实际请求的完整URL：
  • 若前端与后端跨域部署，确认Vue的代理配置（如vue.config.js）是否正确转发请求到后端地址：

    module.exports = {
      devServer: {
        proxy: {
          '/': {
            target: 'http://localhost:5000', // 后端地址
            changeOrigin: true
          }
        }
      }
    }
    

  • 确认请求路径无拼写错误（如多/少斜杠）。

4. 确认后端路由注册 #

• 检查Program.cs或Startup.cs中是否正确注册控制器路由：

  // Program.cs示例
  app.MapControllers();
  

• 对比StockController所在程序集，确认ProductsController所在的项目/程序集被包含在路由扫描范围内。

5. 检查POST请求的模型绑定 #

• 确认前端productModel的字段与后端CreateProduct.Request类的属性完全匹配（包括字段名、数据类型），避免因模型绑定失败导致的404。
• 验证请求头Content-Type是否为application/json（axios默认会设置，若手动修改过需确认）。

6. 启用后端日志定位问题 #

• 在appsettings.json中开启路由与授权的详细日志：

  {
    "Logging": {
      "LogLevel": {
        "Microsoft.AspNetCore.Routing": "Debug",
        "Microsoft.AspNetCore.Authorization": "Debug"
      }
    }
  }
  

• 运行后端项目，查看控制台日志，可直接看到请求的路由匹配过程、授权校验结果，定位具体失败原因。

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