ReactJS - 简单的服务器端 API 请求答案

【问题标题】：ReactJS - Simple Server Side API RequestReactJS - 简单的服务器端 API 请求
【发布时间】：2019-01-06 03:11:42
【问题描述】：

我正在客户端的 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) }
        );
      });
  }

【问题讨论】：

在您的服务器中创建一个路由，然后将请求发送到https://jobs.github.com/positions.json，并将 github 响应作为响应发送回。
CORS 必须由服务器的所有者设置才能工作，你可以通过在 php 页面上加载这个 githuburl 并用 axios 加载这个 php 页面来作弊（我不知道这是否是最好的解决方案）
@Tholle - 谢谢 - 我该怎么做？
@Reena Verma 我认为他的意思是 apache/nginx 上的一条路由，它将本地路径路由到外部路径，即 proxypass
@ReenaVerma 这取决于你有什么样的服务器。

标签： node.js reactjs api express cors

【解决方案1】：

如 cmets 中所述，您需要为此创建路由并使用代理来处理请求。步骤如下：

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，并将所需的路由添加到您的 Express 设置中。

【讨论】：

谢谢！今晚我将实施此解决方案，并让您知道我的进展情况...谢谢！