web-dev-qa-db-ja.com

ローカルファイルへのフェッチリクエストが機能しない

ローカルファイルでリクエストを行おうとしていますが、コンピューターでいつエラーを表示しようとしたかわかりません。プロジェクト内のファイルをフェッチすることは可能ですか？

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

Fetchコマンドで静的ファイルを提供しようとしていますが、これは本質的にファイルをサーバーで提供する必要があります。この問題を解決するには、いくつかのオプションを使用できます。このようなことに対して最も一般的に推奨される2つの概要を説明します。

  • Node.jsと expressjs などを使用して、取得するファイルを提供する独自のサーバーをホストします。この手順はより多くの労力と時間を必要とするかもしれませんが、確かにカスタマイズ性が高く、バックエンドからのフェッチがどのように機能するかを学習および理解する良い方法です。
  • Chrome Web Server のようなものを使用して、ローカルネットワークでファイルを提供する非常に単純なサーバーを簡単にセットアップします。この方法を使用すると、前述のWebサーバーでできることをほとんど制御できませんが、Webアプリケーションをすばやく簡単にプロトタイプ化できます。ただし、この方法を実稼働に移行する方法があるとは思いません。

最後に、1つ以上のファイルをオンラインでアップロードして外部URLから取得できる他のオプションがありますが、これは最適な戦略ではない場合があります。

14
Angelos Chalaris

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

Jsonファイルを次のようにパブリックフォルダーに配置してみてください。

public/movies.json

そして、フェッチを使用して

fetch('./movies.json')

または

fetch('movies.json')

以前にも同じ問題が発生しました。 jsonファイルをパブリックフォルダーに配置すると、問題は解決します。フェッチを使用する場合、Reactは通常、パブリックフォルダー内のasset/resourcesファイルを読み取ります。

2
Lex Soft

私の頼りになるアプローチは、 express-generator を使用してクイックローカルサーバーをセットアップし、 ngrok （無料利用枠は問題ありません）を実行して、アプリにURLを指定することです作成します。これには、iOSシミュレーターまたはAndroidエミュレーター、およびコンピューターに接続されていないデバイスでフェッチを簡単にテストできるという利点があります。さらに、アプリをテストしている人にURLを送信することもできます。もちろん、アプリがフェッチエンドポイントとして設定できるように、そのURLを手動で入力する方法が必要になります。

1
vm909