質問: await axios.get(api_url, config); dispatch({ type: READ_REPOSITORIES, response }); } ``` * ブラウザからAPIサーバーに直接アクセス 問題なく成功
回答: ブラウザのセキュリティ機能により、あるページ(ここでは、localhost:3001)から,別サイトのAPIサーバー(ここでは、xxx.herokuapp.com)へのスクリプトによる通信は制限されています。([詳細はこちらら](https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control "オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS)")) この制限を回避するためには、別サイトの**APIサーバー側のレスポンスヘッダ**に、"Access-Control-Allow-Origin"を追加し、許可するドメインを指定する必要があります。(例: Access-Control-Allow-Origin: *) そのため、クライアントであるaxios側ではなく、サーバーであるrails側でAccess-Control-Allow-Originヘッダを返す必要があります。 rack-cors などを使えば、rails側で CORS対応をできますのでご検討ください。(参考: )