Home>

javascript : I can not GET JSON from API server that exists in Heroku in AXIOS

What I want to hear

I want to get JSON from the API server that is present in Heroku using AXIOS,
You can not create an error similar to the following. . .
It is not possible to cut out whether there is a problem with the API server side client side ...
-error contents

no 'Access-Control-Allow-Origin' Header is Present on the Requested Resource. Origin 'http: //localhost: 3001' is ThereFore Not Allowed Access.

A detailed environment and tested.

Environment

Front End: Use AXIOS with React Library
Backend (API server): Ruby on Rails (existence in Heroku)

Try to be tried

  • Change config when axios.get 

    
const API_URL= "
https://xxx.heralkuapp.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}); 
    
}
  • Direct access from browser to API server
    Success without problems

Multipost teratail.com/questions/133899

htb2021-04-06 23:17:34
javascript ruby-on-rails reactjs heroku axios
  • Answer # 1

    The browser security feature limits the Script by the Script to another site (here, localhost: 3001) from another site API server (here, xxx.heralkuapp.com). ()

    To avoid this limitation, you need to add "access-control-allow-origin" to the response header on the API server side of the other site, and specify the allowed domain there is. (Example: Access-Control-Allow-Origin: *)

    Therefore, you need to return an access-control-allow-origin header on the Rails side, which is a server, not the client.

    If you use

    RACK-CORS etc., consider CORS support on the RAILS side. (reference: https://qiita.com/residenti/items/3a03e5e0268b354284b7)