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

Posted 2023-02-22

【中文标题】ReactJS - 简单的服务器端 API 请求

【英文标题】：ReactJS - Simple Server Side API Request

【发布时间】：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 这取决于你有什么样的服务器。

【参考方案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 设置中。

【讨论】：

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