获取对本地文件的请求不起作用答案

【问题标题】：Fetch request to local file not working获取对本地文件的请求不起作用
【发布时间】：2026-01-12 08:30:01
【问题描述】：

我正在尝试在本地文件中发出请求，但我不知道何时尝试在计算机上显示错误。是否可以获取项目中的文件？

 // Option 1
 componentDidMount() {
     fetch('./movies.json')
     .then(res => res.json())
     .then((data) => {
        console.log(data)
     });
 }

 error: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 -->  .then(res => res.json())

 // Option 2
 componentDidMount() {
    fetch('./movies.json', {
       headers : { 
         'Content-Type': 'application/json',
         'Accept': 'application/json'
       }
    })
   .then( res => res.json())
   .then((data) => {
        console.log(data);
   });
 }

 error1: GET http://localhost:3000/movies.json 404 (Not Found) at App.js:15 --> fetch('./movies.json', {
 error2: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 -->  .then(res => res.json())


 // This works
 componentDidMount() {
   fetch('https://facebook.github.io/react-native/movies.json')
   .then( res => res.json() )
   .then( (data) => {
      console.log(data)
   })
 }

【问题讨论】：

您将无法像那样获取它，因为您的本地服务器不知道movies.json 是什么。我建议要么使用import，要么在你的api中添加一个路由来提供文件
从第二个错误GET http://localhost:3000/movies.json 404 (Not Found) 看来，该文件似乎不存在。我们无法告诉您您的文件在哪里...

标签： javascript reactjs fetch-api

【解决方案1】：

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

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

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

【讨论】：

you don't need a server at all
@Hashbrown 仅当您控制浏览器的启动过程时。

【解决方案2】：

尝试像这样将您的 json 文件放在公共文件夹中：

public/movies.json

然后使用获取

fetch('./movies.json')

或

fetch('movies.json')

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

【讨论】：

这对我有用。我首先将 /public 放在 /src/ 中，但这失败了，它必须位于根目录中，与您的 package.json 等位置相同。它还必须命名为“public”而不是“assets”或其他任何东西。好像很多学习资源都过时了？
我收到不支持的错误文件。 '不支持 URL 方案“文件”'。

【解决方案3】：

您的 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;

server.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!'))

【讨论】：

【解决方案4】：

我遇到了同样的错误，我在代码中进行了两项更改以消除该错误。首先，您不需要快速服务器来提供文件，您可以从 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 文件位于公用文件夹中，并且 fetch 函数中的路径参数如上所述正确。相对路径对我不起作用。其次，如图所示设置标题。从我的 fetch 调用中删除标题部分仍然给我这个错误。

【讨论】：

我收到错误“不支持 URL 方案“文件”。”

【解决方案5】：

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

【讨论】：

【解决方案6】：

我的首选方法是使用express-generator 设置一个快速的本地服务器，然后运行ngrok（免费套餐很好）并将您的应用程序指向它创建的网址。这样做的好处是让您可以轻松地在 iOS 模拟器或 Android 模拟器以及未连接到计算机的设备上测试您的抓取。此外，您还可以将 URL 发送给测试您的应用程序的人。当然，他们需要一种方法来手动输入该 url，以便应用程序可以将其设置为 fetch 端点。

【讨论】：

【解决方案7】：

我得到它的工作方式非常简单 - 不需要快递/网络服务器。做吧：

import data from '../assets/data.json';

并像这样使用 json 数据（假设它是 JsonArray）： data.map(movie ...

在App.js 或其他扩展React.Component 的类中执行此操作，

【讨论】：

【解决方案8】：

假设我有以下文件 test.html

 <html>
   <head>
 <meta charset="UTF-8" />
 </head>
 <body>
 <script> 
 var depdata;
 depdata =  fetch("test1.geojson")
.then((data) => {
    return data;
});

 depdata.then(function(data) {console.log(data)})
   </script>
 </body>
 </html>

通过file://...访问firefox中的文件时出现以下错误：

  Cross-Origin Request Blocked:....

当我在 firefox 上跟踪错误时，我得到了以下解释

CORS 请求可能只使用 HTTPS URL 方案，但请求指定的 URL 是不同类型的。如果 URL 使用 file:/// URL 指定本地文件，则通常会发生这种情况。

要解决此问题，只需确保在发出涉及 CORS 的请求时使用 HTTPS URL，例如 XMLHttpRequest、Fetch API、Web 字体 (@font-face)、WebGL 纹理和 XSL 样式表。

所以据我了解，我们只需要通过HTTP 访问 test.html。解决这个问题最直接的方法是 python 简单的 http 服务器。在终端中。

> cd directory of the project.
> python3 -m http.server 8000 --bind 127.0.0.1

然后在浏览器中：

http://localhost:8000/test.html

【讨论】：

【解决方案9】：

错误

Unexpected token < in JSON at position 0

来自请求不成功时返回的 HTML 文件。 HTML 文件的第一个元素（位置 0）通常是一个“

您可以在检查工具 -> 网络 -> 红色标记的错误文件 -> 响应中找到返回的 HTML 文件。在那里你可以看到具体的错误是什么。 Example Error Message

为了解决我的错误，它有助于将要导入的文件移动到我的 React 项目的 Public 文件夹中，然后像这样从“src”文件夹中的文件导入它：fetch('dataTemplate.json')

【讨论】：

【解决方案10】：

您可以将 json 文件放在公共文件夹中。在您的 React 组件中，您可以使用 userEffect ()。在这种情况下，您不需要 Express.js。

React.useEffect(() => { 
   fetch("./views/util/cities.json")
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
  });

【讨论】：