Home>

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
  • 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)