Vue.js Axios GET 请求 404 问题：深入诊断与全面解决方案

vue.js

2024-03-06 13:39:35

Vue.js Axios 获取请求 404 问题的诊断与解决指南

概述

使用 Vue.js 和 ASP.NET Core 进行 Web 开发时，您可能会遇到 Axios GET 请求失败并返回 404 错误的情况。本文将深入探讨导致此问题的常见原因并提供全面的解决方案。

问题分析

404 错误通常表示服务器无法找到请求的资源。在 Vue.js 和 ASP.NET Core 的上下文中，此问题可能是由于以下原因造成的：

路由错误： Vue.js 请求的 URL 与后端控制器中的路由不匹配。
跨域问题： 前端和后端部署在不同的域名上，并且未正确配置跨域请求 (CORS)。
服务器配置问题： ASP.NET Core 项目未正确配置，无法处理来自 Vue.js 的请求。

解决方法

检查路由

确保 Vue.js 中的请求 URL 与 ASP.NET Core 控制器中的路由相匹配。
检查 ASP.NET Core 控制器是否使用正确的特性进行路由（例如，[HttpGet]）。

解决跨域问题

在 ASP.NET Core 项目中，使用 Cors 中间件启用 CORS。
配置中间件以允许来自 Vue.js 前端域的请求。

检查服务器配置

确保 ASP.NET Core 项目已正确部署并且正在监听请求。
检查防火墙或其他网络设置是否阻止了 Vue.js 客户端与后端服务器之间的通信。

检查控制器代码

确保 ASP.NET Core 控制器中的方法与 Vue.js 发起的请求类型相匹配（例如，使用 [HttpGet] 和 [HttpPost] 属性）。
检查方法参数和数据绑定是否正确。

其他建议

使用浏览器开发工具的网络选项卡检查请求和响应。
使用 Fiddler 或 Wireshark 等工具监视网络流量。
使用断点或日志记录来调试 ASP.NET Core 控制器中的代码。
确保 Vue.js 和 ASP.NET Core 项目都是最新版本。

示例代码

Vue.js（修复后）：

getProducts() {
  this.loading = true;
  axios
    .get('/api/Products') // 更新了 URL 以匹配后端路由
    .then(res => {
      console.log(res);
      this.products = res.data;
    })
    .catch(err => {
      console.log(err);
    })
    .then(() => {
      this.loading = false;
    });
}

ASP.NET Core（假设使用 ASP.NET Core Web API）：

[Route("api/[controller]")]
[ApiController]
public class ProductsController : ControllerBase
{
    private readonly ApplicationDbContext _ctx;

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

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

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

    // 其他控制器方法...
}