本地使用Axios API获取数据时出现404错误求助

你的代码出现404错误的核心原因是Axios是用来发起HTTP请求的工具，不能直接请求项目src目录下的源码文件——src目录下的文件属于编译前的源码，不会被作为静态资源暴露给HTTP请求，因此请求src/variables/carddataa.js必然返回404。

根据你的使用场景，提供两种可行解决方案：

方案一：直接导入本地数据文件（推荐，适用于静态数据） #

如果carddataa.js是导出静态数据的文件，直接通过ES6的import语法导入即可，无需使用Axios。

1. 确保carddataa.js的导出格式正确：

// src/variables/carddataa.js
export default [
  { id: 1, card_title: "示例标题1", card_subtitle: "示例副标题1", card_text: "示例内容1" },
  { id: 2, card_title: "示例标题2", card_subtitle: "示例副标题2", card_text: "示例内容2" },
  // 可添加更多数据项
];

2. 修改组件代码，替换Axios请求为直接导入：

import Card from "react-bootstrap/Card";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import { useState, useEffect } from "react";
// 直接导入数据文件，路径根据实际文件位置调整
import cardData from "./variables/carddataa";

function GridExample() {
  const [myData, setMyData] = useState([]);
  const [isError, setIsError] = useState("");

  useEffect(() => {
    try {
      setMyData(cardData);
    } catch (error) {
      setIsError(error.message);
    }
  }, []);

  if (isError) {
    return <div>Error: {isError}</div>;
  }

  return (
    <div>
      <Row xs={2} md={3} className="g-3">
        {myData.map((post) => {
          const { id, card_title, card_subtitle, card_text } = post;
          return (
            <Col key={id}>
              <Card>
                <Card.Body>
                  <Card.Title>{card_title}</Card.Title>
                  <Card.Subtitle>{card_subtitle}</Card.Subtitle>
                  <Card.Text>{card_text}</Card.Text>
                </Card.Body>
              </Card>
            </Col>
          );
        })}
      </Row>
    </div>
  );
}

export default GridExample;

方案二：使用Axios请求public目录下的静态文件（适用于需要HTTP请求的场景） #

如果你确实需要通过Axios请求数据，需要将数据文件放到项目的public目录下（该目录下的文件会被作为静态资源直接暴露）。

1. 在public目录下创建data文件夹，放入carddata.json文件：

// public/data/carddata.json
[
  { "id": 1, "card_title": "示例标题1", "card_subtitle": "示例副标题1", "card_text": "示例内容1" },
  { "id": 2, "card_title": "示例标题2", "card_subtitle": "示例副标题2", "card_text": "示例内容2" }
]

2. 修改Axios的请求路径：

// 修改fetchData函数
async function fetchData() {
  try {
    // 路径以/开头，指向public目录下的文件
    const response = await axios.get("/data/carddata.json");
    setMyData(response.data);
  } catch (error) {
    setIsError(error.message);
  }
}

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