如何克服Redux React Express和Node的CORS問題？

我有一個使用React Router和Redux作爲其狀態管理器的React App。該應用程序的服務器端使用Express和Node。如何克服Redux React Express和Node的CORS問題？

我正在對外部服務進行API調用。我無法在外部服務上啓用CORS。因此，我需要使用我的應用服務器端來調用外部服務，以從等式中刪除瀏覽器，並消除任何CORS錯誤。

我能夠成功從服務器端的服務獲取數據。我想知道是否有可能通過某種中間件（查找示例/資源）在客戶端和服務器之間共享Redux存儲。

目標：

1）在客戶端

2）有一個事件調用服務器端路線外部API（不知道如何做到這一點）

處理click事件

3）然後，服務器處理此路由，使得該請求，並且向客戶端發送所述響應（通過共享反應商店 - 不知道這是可能的）

4）商店獲得新的狀態，一個然後發送到客戶端組件和UI更新

是否有任何這樣的示例/教程？不尋找最初的服務器渲染頁面，但指導如何通常執行上述4個步驟。

來源

2016-08-03 Joe C

您使用哪個庫來進行API請求？的SuperAgent /取？ – Deadfish

檢出我目前正在構建的這個例子，已經支持universal react/redux應用程序：https：//github.com/alexnm/react-seed。另外如果你想檢查一個更復雜的例子，我建議MERN啓動器：https：//github.com/Hashnode/mern-starter –

感謝您的建議。

事實證明，我在考慮解決方案時非常seve。。我真正需要的是能夠從客戶端事件（加載組件）啓動服務器端功能（從外部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 
    }) 
}

在快遞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) 
    }) 
})

來源

2016-08-04 09:38:04

如何克服Redux React Express和Node的CORS問題？

回答

相關問題