Search code examples
node.jsreactjsexpressherokucreate-react-app

After deploying app to Heroku, the API_URL config variable get prepended by the URL of my current app causing wrong request URLs

I'm running two separate apps (Create-react-app frontend & a node/express backend) on Heroku. I'm trying to make a request from the info-screen.herokuapp.com to the info-screen-backend one.

This is the GET request handler:

app.get('/info', (req, res) => {
    Info.find()
    .then( info => {
        res.status(200).json(info)
    })
    .catch( err => {
        res.status(404).json({
            message: err
        });
    });
});

And here you can see the frontend side that actually sends the requests: 

 axios.get(API_URI + '/info')
    .then( (resp) => {
      console.log(resp);
    })
    .catch( (err) => {
      console.log(err);
    })

Here is the config var for the API_URI env variable:

Config var

I've been searching for a fix for this for about two hours now.

Whenever I send a request, for some reason the frontend tries to prefix the API_URI variable with it's own URI resulting in this (Look at the Request URL):

Request

Has anyone here maybe had any experience with this? I tried to google around and thought maybe create-react-app was using BaseUrl or something but apparently it's not.

When I send a request to the API directly it returns this normally: 

[
  {
    "created_by": "Innkaupadeild",
    "show": false,
    "_id": "5e67b5b4070f000004a62c79",
    "title": "New shipment on hold",
    "details": "New shipment on testing 2",
    "created_date": "2020-03-10T15:43:48.710Z",
    "modified_date": "2020-03-10T15:43:48.710Z",
    "__v": 0
  }
]

Meaning that this is definitely on the frontend site.

Am I missing maybe something in my package.json or is there another file that I need in order to allow heroku to make external requests?

The buildpack that I'm using on the frontend is "Mars Create-React-Buildpack"

Solution

  • Should the API_URI not be https://info-screen.herokuapp.com maybe it's just because the image cuts of part of the value but in your typed text you also leave out the protocol part of the url