如何在基于 ReactJS 的节点应用程序中从外部 API 获取服务器端数据？答案

【问题标题】：How to fetch data on server-side from external API within ReactJS-based node application?如何在基于 ReactJS 的节点应用程序中从外部 API 获取服务器端数据？
【发布时间】：2018-05-29 20:27:27
【问题描述】：

我努力从 React-App 中的外部 API 获取数据。但它总是给我以下错误：

请求中没有“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://api.example.com” 使用权。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 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;

据我所知，CORS 仅在客户端请求时需要，服务器端请求不需要。

谁能帮帮我？

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

componentDidMount 钩子永远不会在服务器端被调用。因此，只有在将应用程序安装到 DOM 后，您的 fetch 代码才会在浏览器中运行。要从服务器获取数据，您可以在 componentWillMount 挂钩中使用 fetch，它将在服务器上调用，但也会在客户端上调用。

【讨论】：

【解决方案2】：

您必须在服务器上调用api请求，等待响应并返回呈现的html页面。

我已经为服务器端渲染创建了一个启动器https://github.com/gzoreslav/react-redux-saga-universal-application

它使用 redux 和 redux-saga

【讨论】：