获取 api 时如何使我的反应应用程序动态化？答案

【问题标题】：How to make my react app dynamic when fetching api?获取 api 时如何使我的反应应用程序动态化？
【发布时间】：2021-07-10 17:54:42
【问题描述】：

在我的 React 应用程序中，我使用的是 MySql 和 NodeJS。当我获取 api 时，代码看起来像这样

    axios.post('http://localhost:5000/api/product-from-search', obj)
    .then(function (response) {      
      state.setState({ searchInputResult: response.data })
    })
    .catch(function (error) {
      console.log(error);
    })
  }

我怎样才能让它动态化，这样我只需要写

    axios.post('/api/product-from-search', obj)

【问题讨论】：

标签： mysql node.js reactjs backend

【解决方案1】：

您可以在组件外部定义 baseURL 并在函数调用中使用模板文字。

const baseURL = "http://localhost:5000"
~~~
axios.post(`${baseURL}/api/product-from-search`, obj)

【讨论】：

【解决方案2】：

如果我没有正确理解您的问题，请原谅。

我想您是在问如何为 Axios 设置 baseURL，因此您可以将所有路由键入为相对而不是绝对（'/api/...' 而不是 'http://address:port/api/ ...')?

您不需要编写路径的 http://localhost:5000 部分。 Axios 应该只适用于相对的 '/api/...'。

如果不是这样，我认为您可能遇到了 CORS 问题。 (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

如果您使用过 create-react-app，那么在 package.json（您的 react 应用程序的）中，在右花括号之前添加以下行：

"proxy": "http://localhost:5000"

编辑：完成此操作后不要忘记重新启动服务器！

如果是 CORS 问题，则请求失败，因为您的服务器与前端位于不同的来源（在本例中为不同的端口），出于安全原因，浏览器将阻止该来源。

当然，您可以使用 AXIOS 配置来设置 baseURL，这样您就不必在每个路由中都包含它，如下所述：(https://github.com/axios/axios)

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

但我认为这不是您的实际问题。先试试你的 package.json 中的代理。

干杯！

【讨论】：

【解决方案3】：

您可以创建一个单独的“helper.js”文件，您可以在其中定义一个函数来根据要求配置 axios 发布请求。

   
   import React from 'react';

   let baseUrl = "http://localhost:5000";

    export function post(apiEndpoint, payload){
        return  axios.post(baseUrl+apiEndpoint, payload,
        options = { headers: {
        'Authorization': 'Your token goes here',
        }})
        .then((response)=>{
            return response;
        }).catch((err)=>{
            console.log(err);
        })
    }

现在，使用所需参数将此命名导出调用到您的文件中。

【讨论】：