如何使用Redux React Express和Node克服CORS问题

Question

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

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

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

目标：

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

2） 让该事件调用服务器端路由到外部api（不知道如何做到这一点）

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

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

有这样的例子/教程吗？不是在寻找一个初始的服务器呈现页面，而是指导如何通常实现上述4个步骤。

Answer 1

感谢您的建议。

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

在我的组件中：

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 */
  }

组件调用的productAPI.getProductItems（）：

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
    })
}

在Express server.js文件中，服务器会看到这个url，然后获取正确的数据。shopify.get()来自shopify节点api模块：

app.get('/api/get-products', function (req, res) { // '/api/get-products' called from client
  shopify.get('/admin/products.json', function (err, data, headers) {
    res.send(data)
  })
})