Redux React ExpressおよびNodeのCORS問題を解決するにはどうすればよいですか？

Question

私はReact RouterとReduxをその状態マネージャーとして使用するReact Appを持っています。アプリのサーバー側はExpressとNodeを使用します。

私は外部サービスへのAPI呼び出しを行っています。 CORSを外部サービスで有効にする機能はありません。したがって、私は、外部サービスへの呼び出しを行ってブラウザを式から削除し、CORSエラーを排除するために、自分のアプリケーションのサーバー側を使用する必要があります。

サーバー側のサービスから自分のデータを正常に取得できました。私はクライアントとサーバーの間にある種のミドルウェア（例とリソースを探して）との間でReduxストアを共有することが可能かどうかを知りたいと思います。

目標：

1）は、クライアント

2のクリックイベントを処理します）、そのイベントは、外部APIにサーバー側のルートを呼び出している（これを実行する方法がわからない）

3）は、次にサーバは、このルートを処理要求を行い、そしてを通じて（クライアントへの応答を送信反応し共有ストア - これが可能であるかどうかわからない）

4）ストアが新しい状態を取得し、 〜 dは、クライアント側のコンポーネントと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 
    }) 
} 

エクスプレス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) 
    }) 
})