ReactJS -简单服务器端应用编程接口请求
ReactJS -简单服务器端应用编程接口请求
提问于 2018-07-30 04:30:10
我在客户端用ReactJS做了一个非常简单的API axios.get请求。然而，它被我的浏览器中的CORS阻止了。因此不会返回任何数据。
我知道我需要在服务器端发出这个请求，但我不确定我应该如何重构下面的代码(将在服务器端编写)。
任何关于如何重写这段代码的技巧，都将不胜感激！
谢谢,
// MAKE JOB API REQUEST
componentDidMount() {
console.log('COMPONENT DID MOUNT');
axios.get('https://jobs.github.com/positions.json?search=')
.then(res => {
console.log('jobs', res.data.slice(0, 9));
this.setState(
{ jobs: res.data.slice(0, 9) }
);
});
}回答 1
Stack Overflow用户
发布于 2018-07-30 06:22:19
正如注释中所解释的，您需要为其创建一个路由，并使用代理来处理请求。具体步骤如下：
webpack.config.js
devServer: {
contentBase: ['src'],
watchContentBase: true,
historyApiFallback: true,
hot: true,
inline: true,
port: 8000,
open: true,
proxy: {
'/api/*': {
target: 'http://localhost:4000/',
secure: false
}
}
},index.js
const axios = require( "axios" );
...skipped codes
app.get( "/api/jobs", ( req, res ) => {
axios.get( `https://jobs.github.com/positions.json?search=${ req.query.job }` )
.then( result => res.send( result.data ) );
} );如您所见，您还需要在此文件中使用axios。
app.js
handleSubmit = ( e ) => {
e.preventDefault();
const { searchData } = this.state;
axios.get( `/api/jobs?job=${ searchData }` )
.then( res => this.setState( { jobs: res.data } ) );
}您的代码中没有componentDidMount，所以我使用了handleSubmit。使用此设置，无论何时您向/api/something发出请求，它都会重定向到您的Express服务器。因此，在前端，您将使用/api，并将所需的路由添加到快速设置中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51584293
复制相关文章
相似问题
腾讯云开发者
