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

【问题标题】：How To Overcome CORS issues with Redux React Express and Node?如何克服 Redux React Express 和 Node 的 CORS 问题？
【发布时间】：2016-12-09 12:00:33
【问题描述】：

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

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

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

目标：

1) 在客户端处理点击事件

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

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

4) store 获取新状态，然后发送到客户端组件，UI 更新

有这方面的例子/教程吗？不是在寻找初始服务器呈现的页面，而是在一般情况下如何实现上述 4 个步骤的指南。

【问题讨论】：

您使用哪个库来发出 API 请求？超级代理/获取？
查看我目前正在构建的这个示例，它已经支持通用 react/redux 应用程序：github.com/alexnm/react-seed。另外，如果您想查看更复杂的示例，我建议您使用 MERN 入门：github.com/Hashnode/mern-starter

标签： express reactjs redux react-router react-redux

【解决方案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-node-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)
  })
})

【讨论】：