使用Axios请求本地文件时出现意外404错误求助

问题场景 #

项目结构：

> library-project
  > data
      data.json
  > src
    > pages
      index.tsx

index.tsx代码：

import axios, { AxiosError, AxiosResponse } from "axios";

export default function FeaturedBooks() {
  const getBooks = () => {
    axios
      .get("data/data.json")
      .then((res: AxiosResponse) => {
        console.log(res);
      })
      .catch((err: AxiosError) => {
        console.error(err);
      });
  };
  return (
    <>
      <button onClick={getBooks}>Get Books</button>
    </>
  );
}

控制台报错：Failed to load resource: the server responded with a status of 404 (Not Found)

核心原因 #

React类项目（Create React App/Vite等）的静态资源访问有特定规则：只有public目录下的文件会被构建工具视为可直接通过HTTP请求访问的静态资源。当前data文件夹在项目根目录，不在public目录中，所以开发服务器无法找到该文件。

解决方案 #

方案一：移动文件夹到public目录（推荐） #

1. 在项目根目录创建public文件夹（如果没有的话）
2. 将data文件夹整体移到public目录下，结构变为：

> library-project
  > public
    > data
      data.json
  > src
    > pages
      index.tsx

3. 修改axios请求路径为绝对路径：

axios.get("/data/data.json")

方案二：直接导入JSON文件（无需axios） #

因为JSON文件属于静态资源，可以直接在组件中导入，不需要发起HTTP请求：

import axios, { AxiosError, AxiosResponse } from "axios";
// 直接导入json文件，路径根据实际层级调整
import booksData from '../../../data/data.json';

export default function FeaturedBooks() {
  const getBooks = () => {
    console.log(booksData); // 直接使用导入的数据
  };
  return (
    <>
      <button onClick={getBooks}>Get Books</button>
    </>
  );
}

方案三：配置开发服务器允许访问外部目录（Vite专属） #

如果使用Vite作为构建工具，可以修改vite.config.ts，允许服务器访问项目根目录的data文件夹：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    fs: {
      allow: ['../data'] // 允许访问上级目录的data文件夹
    }
  }
});

之后保持原请求路径即可，但这种方式只适用于开发环境，生产构建时仍需将资源移至public目录。

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