

### 聞きたいこと

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

[code]

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

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

### 環境

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

### 試したこと

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

[code]  
    
    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 });  
    
    }  
    
    
[/code]

`

  * ブラウザからAPIサーバーに直接アクセス  
問題なく成功


CC BY-SA 4.0
2018-07-03T15:15:24.187
45279
2021-04-04T00:51:22.447
2021-04-04T00:51:22.447
32986
26282
question
javascript ruby-on-rails reactjs heroku axios
axiosでHerokuに存在しているAPIサーバーからJSONをgetできない


ブラウザのセキュリティ機能により、あるページ(ここでは、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対応をできますのでご検討ください。(参考:
<https://qiita.com/residenti/items/3a03e5e0268b354284b7>)


CC BY-SA 4.0
2018-07-03T15:31:57.943
45280
2018-07-03T15:31:57.943
45279
answer