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

Question

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

 // 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)
   })
 }

Answer 1

您正尝试使用fetch命令提供静态文件,该命令本身要求服务器提供该文件.要解决此问题,您可以使用一些选项.我将概述最常用于此类事情的两个:

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

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

Answer 2

您的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!'))

Answer 3

我遇到了同样的错误，我在代码中做了两个更改以消除错误。首先，您不需要快速服务器来为您的文件提供服务，您可以从 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 调用中删除标题部分仍然给我这个错误。

Answer 4

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

public / movies.json

然后使用

fetch('./movies.json')

要么

fetch('movies.json')

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

Answer 5

解决您的问题的一个简单方法是使用适用于 Visual Studio Code 的 Live Server 扩展。