关于本地API获取，它向我抛出404错误

Question

我一直在尝试借助 Axios API 来本地获取数据。

但我不知道代码出了什么问题。它给我抛出了 404 错误。

我将不胜感激任何帮助。 我在这里提供了下面的代码。

import Card from "react-bootstrap/Card";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import axios from "axios";
import { useEffect, useState } from "react";

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get("src/variables/carddataa.js");
        setMyData(response.data);
      } catch (error) {
        setIsError(error.message);
      }
    }

    fetchData();
  }, []);

  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;

Answer 1

您似乎正在尝试使用 Axios 从本地文件中获取数据。但是，您传递给 axios.get() 的 URL 似乎不正确，这就是您收到 404 错误的原因。

如果您尝试从本地文件获取数据，则应在 URL 中使用 file:// 协议。另外，请确保包含文件的正确路径。

例如，如果您的 carddataa.js 文件位于项目的 src/variables 目录中，您可以像这样修改 axios.get() 调用：

const response = await axios.get("file:///path/to/your/project/src/variables/carddataa.js");

将 /path/to/your/project 替换为项目目录的实际路径。

此外，请确保 carddataa.js 文件确实存在于指定位置并且您的应用程序可以访问它。