API works locally only

I just made a simple app using my first API from dog.ceo and it works perfectly locally, but on github pages the images will not load. The page can be found here.

The console is giving the following errors:

Failed to load resource: the server responded with a status of 404 ()
slamoureux.github.io/:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

looks like the :1 is the issue but I don’t know what that is.

Without seeing the code, it’s hard to say what is going on. But 404 often means that it can’t connect to the server. The error you’re seeing (I think) is because your code is not handling the error and it trying to parse what it is getting as json but it is not.

So, my best guess is that you have two problems to address.

  1. You need to figure out why your code can’t find the url.
  2. You need to handle it more gracefully when your url fails.

On the first problem, when I put the url into my address bar:

https://slamoureux.github.io/dog.ceo/api/breed/akita/images/random

I also get a 404 error. When I look at your git repo for this git pages:

https://github.com/slamoureux/slamoureux.github.io

I don’t see much in the way of code. Also, are you trying to put an api on git pages? Unless something has changed, last I heard you could only host static pages on git pages. If you want to host a server, you’d have to do it somewhere else, like heroku.

oh wow, so the issue was that:

	let url = `https://dog.ceo/api/breed/${event.target.value}/images/random`;

had only one forward slash after https initially. Adding the second one made it work on github. :man_facepalming:

But I guess the question is why would it work locally with just one slash?