Запрос на загрузку в локальный файл не работает

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

Попробуйте поместить свой файл json в общую папку, например, так:

публичный / movies.json

, а затем получить

fetch('./movies.json')

или

fetch('movies.json')

Я уже сталкивался с той же проблемой ранее. Когда я помещаю файл json в общую папку, проблема решается. При использовании fetch React обычно читает файлы ресурсов / ресурсов в общей папке.

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

Мой подход состоит в том, чтобы использовать express-generator для настройки быстрого локального сервера, затем запустить ngrok (бесплатный уровень в порядке) и указать ваше приложение на URL это создает. Это дает вам преимущество, позволяя вам легко проверить выборку в симуляторе iOS или эмуляторе Android, а также на устройстве, не привязанном к вашему компьютеру. Кроме того, вы также можете отправить URL-адрес людям, тестирующим ваше приложение. Конечно, им нужно было бы вручную ввести этот URL, чтобы приложение могло установить его в качестве конечной точки выборки.

Answer 4

Вы пытаетесь передать статический файл командой извлечения, которая по своей природе требует, чтобы файл обслуживался сервером.Чтобы решить эту проблему, у вас есть несколько вариантов, доступных для вас.Я собираюсь обрисовать в общих чертах два, которые обычно предлагаются для такой вещи:

• Используйте Node.js и что-то вроде expressjs для размещения вашего собственного сервера, который обслуживает файл, который выхочу получить.Хотя эта процедура может потребовать больше усилий и времени, она, безусловно, более настраиваема и является хорошим способом узнать и понять, как работает выборка из бэкэнда.
• Используйте что-то вроде Chrome Web Server , чтобы легконастроить очень простой сервер для обслуживания вашего файла в локальной сети.Используя этот метод, вы практически не контролируете, что вы можете делать с указанным веб-сервером, но вы можете быстро и легко создать прототип своего веб-приложения.Однако я сомневаюсь, что есть способ перенести этот метод в рабочую среду.

Наконец, есть и другие варианты, в которых вы можете загрузить один или несколько файлов в режиме онлайн и извлечь их с внешнего URL-адреса, однако это может не произойти.быть оптимальной стратегией.