Question

我有一个使用React Router和Redux作为其状态管理器的React App。应用程序的服务器端使用Express和Node。

我正在对外部服务进行API调用。我没有能力在外部服务上启用CORS。因此，我需要使用我的应用程序的服务器端来调用外部服务以从等式中删除浏览器，并消除任何CORS错误。

我能够成功从服务器端的服务获取数据。我想知道是否可以在客户端和服务器之间使用某种中间件（寻找示例/资源）共享Redux存储。

目标：

1）处理客户端中的点击事件

2）让该事件调用服务器端路由到外部api（不知道该怎么做）

3）然后服务器处理此路由，发出请求，并将响应发送到客户端（通过共享反应存储 - 不确定是否可行）

4）商店获得新状态，然后发送到客户端组件，并更新UI

有没有这方面的示例/教程？不是寻找初始服务器呈现页面，而是指导通知如何实现上述4个步骤的指南。

Answer 1

感谢您的建议。

事实证明，我严重过度思考解决方案。我真正需要的是能够从客户端事件（加载组件）启动服务器端功能（从外部API获取资源）。有点像提交表单，有一个启动服务器端功能的动作。

在我的组件中：

true

组件调用的productAPI.getProductItems（）：

$source = file_get_contents('https://en.wikipedia.org/w/api.php?action=query&titles=Cancer&prop=langlinks&lllang=ar&format=json');
$results = json_decode($source, true);

foreach ($results['query']['pages'] as $k => $v)
{
    var_dump(array_key_exists('langlinks', $v));die();
}

在Express server.js文件中，服务器将看到此URL，然后获取正确的数据。 componentDidMount() { const product_api_results = productApi.getProductItems() console.log('product_api_results in CART Component: ', product_api_results) /* now I have results and can put it in the Redux Store via action to reducer for other components to work with on client */ }来自shopify-node-api模块：

export function getProductItems () {
  return axios.get('/api/get-products') // triggers a server side route
    .then(function (response) {
      console.log('client side response: ', response)
      return response
    })
}

如何克服Redux React Express和Node的CORS问题？

1 个答案: