API call works locally, but fails when deployed to Heroku or zeit

The HTTP GET call works fine locally, but fails when the app is deployed to Heroku or zeit.

Here is the code:

const searchUrl = "https:/hn.algolia.com/api/v1/search?query=" + searchTerm;
    axios({
      method: "get",
      url: searchUrl,
      responseType: "json"
    })

I'm making a call to Hackernews API. But when I open network tab while loading the app in heroku, I see it is making the call to https://evening-chamber-42563.herokuapp.com/hn.algolia.com/api/v1/search?query= (the actual url should be https://hn.algolia.com/api/v1/search?query=), somehow it is inserting evening-chamber-42563.herokuapp.com/ in between the actual URL that I've specified.

I thought it might be a problem with heroku, and deployed my app on zeit to see if it fixes the issue. Same thing again. This time it made a request to https://hackernews-clone-bgbmdyblch.now.sh/hn.algolia.com/api/v1/search?query= (hackernews-clone-bgbmdyblch.now.sh is where my app is deployed).

I tried with native fetch, and axios library. Still same issue.

Hours of google searching didn't help me, so I'm posting this here. Any help appreciated.

Solution

Turns out there was a typo in the URL (missing a '/' after the protocol). It worked fine after correcting it.

When I called fetch in my localhost with the incorrect URL (missing '/'), the browser corrected it for me. But it created problems when the app was deployed on a cloud platform.