您正在尝试使用 fetch 命令提供静态文件，该命令本质上要求该文件由服务器提供。要解决此问题，您可以使用几个选项。我将概述最常建议用于此类事情的两个：

• 使用 Node.js 和诸如expressjs 之类的东西来托管您自己的服务器，该服务器为您想要获取的文件提供服务。虽然此过程可能需要更多的精力和时间，但它肯定更具可定制性，并且是学习和理解从后端获取如何工作的好方法。
• 使用Chrome Web Server 之类的东西可以轻松设置一个非常简单的服务器，以便在本地网络上提供您的文件。使用这种方法，您几乎无法控制您可以使用所述 Web 服务器执行的操作，但是您可以快速轻松地构建您的 Web 应用程序原型。但是，我怀疑是否有办法将这种方法应用于生产。

最后，还有其他选项可以让您在线上传一个或多个文件并从外部 URL 获取它们，但这可能不是最佳策略。

尝试将您的 json 文件放在公共文件夹中，如下所示：

公共/movies.json

然后使用

fetch('./movies.json')

或者

fetch('movies.json')

我以前也遇到过同样的问题。当我将 json 文件放在 public 文件夹中时，问题就解决了。使用 fetch 时，React 通常会读取 public 文件夹中的资产/资源文件。

您的 JSON 文件需要由服务器提供，因此您需要快速服务器（或任何其他服务器）。在这个例子中，我们使用express。

注意：您也可以下载git repo

App.js 文件

import React, { Component } from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    const myHeaders = new Headers({
      "Content-Type": "application/json",
      Accept: "application/json"
    });

    fetch("http://localhost:5000/movie", {
      headers: myHeaders,

    })
      .then(response => {
        console.log(response);
        return response.json();
      })
      .then(data => {
        console.log(data);
        this.setState({ data });
      });
  }

  render() {
    return <div className="App">{JSON.stringify(this.state.data)}</div>;
  }
}

export default App;

服务器.js

var express = require("express");
var data = require('./movie.json'); // your json file path
var app = express();


app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get("/movie", function(req, res, next) {
  res.send(data);
});

app.listen(5000, () => console.log('Example app listening on port 5000!'))

我遇到了同样的错误，我在代码中做了两个更改以消除错误。首先，您不需要快速服务器来为您的文件提供服务，您可以从 create-react-app 目录中公共文件夹内的本地 json 文件中读取数据。

  const getData=()=>{
     fetch('data.json',{
          headers : { 
            'Content-Type': 'application/json',
            'Accept': 'application/json'
           }
         }
        )
         .then(function(response){
            console.log(response)
            return response.json();
          })
           .then(function(myJson) {
              console.log(myJson);
            });
      }
      useEffect(()=>{
        getData()
      },[])

首先，正如上面的一些答案所建议的那样，确保您的 json 文件位于 public 文件夹中，并且 fetch 函数中的 path 参数如上所述是正确的。相对路径对我不起作用。其次，如图所示设置标题。从我的 fetch 调用中删除标题部分仍然给我这个错误。

一个简单的解决方案是使用实时服务器扩展（如果您使用 vs 代码）