0

聞きたいこと

axiosを使用してHerokuに存在しているAPIサーバーからJSONをGetしたいと思っているのですが、
以下のようなエラーが発生してしまいできません。。。
APIサーバー側・クライアント側に問題があるのかの切り分けもできていない状態です…
- エラー内容

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3001' is therefore not allowed access.

詳細な環境や試したことを下にまとめます。

環境

フロントエンド:React ライブラリーでaxiosを使用
バックエンド(APIサーバー):Ruby on Rails(Herokuに存在)

試したこと

  • axios.getする際のconfigを変更

    const api_url = "https://xxx.herokuapp.com/api/v1"
    const config = {
    headers: {'Access-Control-Allow-Origin': '*'}
    }
    export const readRepositories = () => async dispatch => {
    const response = await axios.get(api_url, config);
    dispatch({ type: READ_REPOSITORIES, response });
    }
  • ブラウザからAPIサーバーに直接アクセス
    問題なく成功
1

1 件の回答 1

1

ブラウザのセキュリティ機能により、あるページ(ここでは、localhost:3001)から,別サイトのAPIサーバー(ここでは、xxx.herokuapp.com)へのスクリプトによる通信は制限されています。(詳細はこちらら)

この制限を回避するためには、別サイトのAPIサーバー側のレスポンスヘッダに、"Access-Control-Allow-Origin"を追加し、許可するドメインを指定する必要があります。(例: Access-Control-Allow-Origin: *)

そのため、クライアントであるaxios側ではなく、サーバーであるrails側でAccess-Control-Allow-Originヘッダを返す必要があります。

rack-cors などを使えば、rails側で CORS対応をできますのでご検討ください。(参考: https://qiita.com/residenti/items/3a03e5e0268b354284b7)

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。