javascript - La solicitud de recuperación a un archivo local no funciona

reactjs fetch-api

Question

Estoy tratando de hacer una solicitud en un archivo local, pero no sé cuando intento hacerlo en mi computadora, mostrarme un error. ¿Es posible hacer una búsqueda de un archivo dentro de su proyecto?

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

El servidor debe entregar su archivo JSON, por lo que necesita el servidor Express (o cualquier otro). En este ejemplo estamos usando el uso de Express .

Nota: también puedes descargar git repo

Archivo 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 2

Está intentando servir un archivo estático con un comando fetch, que requiere de manera inherente que un servidor sirva el archivo. Para resolver el problema, tiene algunas opciones disponibles para usted. Voy a resumir los dos que se sugieren más comúnmente para tal cosa:

• Use Node.js y algo como expressjs para alojar su propio servidor que sirve el archivo que desea recuperar. Si bien este procedimiento puede requerir más esfuerzo y tiempo, es ciertamente más personalizable y una buena manera de aprender y entender cómo funciona la recuperación desde un servidor.
• Use algo como Chrome Web Server para configurar fácilmente un servidor muy simple para servir su archivo en su red local. Con este método, tiene muy poco control sobre lo que puede hacer con dicho servidor web, pero puede crear prototipos de forma rápida y sencilla de su aplicación web. Sin embargo, dudo que haya una manera de pasar este método a producción.

Finalmente, hay otras opciones donde puede cargar uno o más archivos en línea y obtenerlos desde una URL externa, sin embargo, esta podría no ser la estrategia óptima.

Answer 3

Mi enfoque es utilizar express-generator para configurar un servidor local rápido, luego ejecutar ngrok (el nivel gratuito está bien) y apuntar su aplicación a la url que crea. Esto tiene la ventaja de permitirle probar fácilmente su búsqueda en el simulador de iOS o en el emulador de Android, así como en un dispositivo que no esté conectado a su computadora. Además, también puede enviar la url a las personas que prueban su aplicación. Por supuesto, debería haber una forma para que ingresen manualmente esa url para que la aplicación pueda establecerla como el punto final de búsqueda.

Answer 4

Trate de colocar su archivo json en la carpeta pública así:

public / movies.json

y luego buscar usando

fetch(''./movies.json'')

o

fetch(''movies.json'')

He experimentado el mismo problema anteriormente. Cuando coloco el archivo json en la carpeta pública, el problema está resuelto. Cuando se usa fetch, React normalmente lee archivos de recursos / recursos en la carpeta pública.