web-dev-qa-db-fra.com

La requête de récupération dans le fichier local ne fonctionne pas

J'essaie de faire une demande dans un fichier local, mais je ne sais pas quand j'essaie de le faire sur mon ordinateur. Me montrer une erreur. Est-il possible de récupérer un fichier dans votre projet?

 // 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)
   })
 }
javascriptreactjsfetch-api
7
Javi Les Paul

Vous essayez de servir un fichier statique avec une commande fetch, ce qui implique que le fichier doit être servi par un serveur. Pour résoudre le problème, vous avez quelques options à votre disposition. Je vais décrire les deux méthodes les plus couramment suggérées:

  • Utilisez Node.js et quelque chose comme expressjs pour héberger votre propre serveur qui sert le fichier que vous voulez récupérer. Bien que cette procédure puisse nécessiter plus d’efforts et de temps, elle est certainement plus personnalisable et constitue un bon moyen d’apprendre et de comprendre le fonctionnement de la récupération depuis un serveur.
  • Utilisez quelque chose comme Serveur Web Chrome pour configurer facilement un serveur très simple afin de servir votre fichier sur votre réseau local. En utilisant cette méthode, vous avez très peu de contrôle sur ce que vous pouvez faire avec ledit serveur Web, mais vous pouvez rapidement et facilement prototyper votre application Web. Cependant, je doute qu'il y ait un moyen de déplacer cette méthode en production.

Enfin, il existe d'autres options permettant de télécharger un ou plusieurs fichiers en ligne et de les récupérer à partir d'une URL externe. Toutefois, cette stratégie n'est peut-être pas optimale.

6
Angelos Chalaris

Votre fichier JSON doit être servi par le serveur, vous avez donc besoin du serveur express (ou de tout autre). Dans cet exemple, nous utilisons express. 

Remarque: vous pouvez également télécharger git repo

Fichier 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!'))
5
patelarpan

Mon approche consiste à utiliser express-generator pour configurer un serveur local rapide, puis exécutez ngrok (le niveau gratuit est suffisant) et pointez votre application sur l'URL créée. Cela présente l'avantage de vous permettre de tester facilement votre récupération dans le simulateur iOS ou l'émulateur Android, ainsi que sur un périphérique non connecté à votre ordinateur. De plus, vous pouvez également envoyer l'URL à des personnes testant votre application. Bien sûr, il leur faudrait un moyen de saisir manuellement cette URL pour que l'application puisse la définir comme point d'extrémité d'extraction.

1
vm909

Essayez de placer votre fichier JSON dans le dossier public comme suit:

public/movies.json

puis chercher en utilisant

fetch('./movies.json')

ou

fetch('movies.json')

J'ai déjà rencontré le même problème auparavant. Lorsque je place le fichier json dans le dossier public, le problème est résolu . Lors de l'utilisation de fetch, React lit normalement les fichiers actif/ressources du dossier public.

0
Lex Soft