[英]How to fetch data on server-side from external API within ReactJS-based node application?
我努力在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-thing,而不是服务器端请求。
谁能帮我?
在服务器端永远不会调用componentDidMount
挂钩。 因此,只有在将应用程序装入DOM后,您的提取代码才会在浏览器中运行。 要从服务器获取数据,您可以在componentWillMount
钩子中使用fetch,它将在服务器上调用,但也在客户端上调用。
您必须在服务器上调用api请求,等待响应并返回呈现的html页面。
我已经为服务器端渲染创建了一个启动器https://github.com/gzoreslav/react-redux-saga-universal-application
它使用redux和redux-saga
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.