ReactJSベースのノードアプリケーション内の外部APIからサーバー側のデータを取得する方法は？

Question

私は、React-App内で外部APIからデータを取得しようとします。私はCORS-事が唯一のクライアント側の要求に必要とされて知っているようにサーバ - のために、限り

// @flow 

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

const URL = 'http://api.example.com/my/api/request' // obfuscated 

class App extends Component { 

    componentDidMount() { 
    fetch(URL).then(response => { 
     console.log(response); 
    }) 
    .catch(err => { 
     console.log(err); 
    }) 
    } 

    render() { 
    return (
     <div className="App"> 
     <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small> 
     <header className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h1 className="App-title">Welcome to React!</h1> 
     </header> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

export default App; 

ない：これは私のコードである

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://api.example.com ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

：しかし、それは常に私に次のエラーを与えますサイドリクエスト。

誰が私を助けることができますか？

Answer 1

componentDidMountフックは決してサーバー側で呼び出されません。その結果、アプリケーションがDOMにマウントされた後で、フェッチコードがブラウザでのみ実行されます。サーバからデータをフェッチするには、componentWillMountフックの内部でフェッチを使用できます。これはサーバ上で呼び出されますが、クライアント側でも呼び出されます。

Answer 2

サーバー上でapi requestを呼び出し、応答を待ち、レンダリングされたhtmlページを返す必要があります。

私はレンダリングサーバ側のためのスターターを作成しているhttps://github.com/gzoreslav/react-redux-saga-universal-application

それは、ReduxのとReduxの-佐賀

を使用しています