Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Create a Reusable Fetch Function

Nour El-din El-helw
Nour El-din El-helw
8,241 Points
Posted by Nour El-din El-helw
Nour El-din El-helw
8,241 Points

Problem in url

So, I kept getting the error: "Failed to load https://dog.ceo/api/breed//images/random: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://port-80-j8t6d8wj6i.treehouse-app.com' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." so I started to use console.log to debug my code and I found that the problem was in 'fetchData(https://dog.ceo/api/breed/${breed}/images/random)'. I don't know why it does that but anyways. I tried the solution provided in the error message and it definitely didn't work because it was returning an opaque response because of { mode: 'no-cors' }. So now the only solution I could think of is getting an array of all the images from the breed selected ( using this url https://dog.ceo/api/breed/${breed}/images ) then using math.random() to get a random image and display it BUT this url also gives the same error ;( . Can anyone explain why this problem is happening? and how to solve it? Edit: I tried to use my own text editor with a local server instead of the workspace and it somehow worked. Anyone has an explanation to this too?

2 Answers

Gari Merrifield
Gari Merrifield
9,597 Points
Gari Merrifield
Gari Merrifield
9,597 Points

For starters, that "//" rather than "/" after breed is causing a problem, it gives an error with a link to the API if you use the "//" ( API Link : https://dog.ceo/dog-api/ )

You are also missing the "s" on "breeds", and have an extra "s" on "image" the sample URL they give is : https://dog.ceo/api/breeds/image/random

Nour El-din El-helw
Nour El-din El-helw
8,241 Points
Nour El-din El-helw
Nour El-din El-helw
8,241 Points

Hmm..weird, I didn't use "//", It was put there because for some reason ${breed} was ignored. Also, I went back to the fourth video and checked the url and it was https://dog.ceo/api/breed/${breed}/images/random(without an 's' in breed and with an 's' in images). The url you sent was from the first video which gets the pic that appears on page load. Anyways thanks for your time :)

Isaiah Callano
Isaiah Callano
9,331 Points
Isaiah Callano
Isaiah Callano
9,331 Points

Hi Nour, I had the same problem and most likely this is what your addEventListener codes look like.

select.addEventListener('change', fetchBreedImage());
card.addEventListener('click', fetchBreedImage());

Simply remove the parentheses after the callbacks because we're not invoking the callbacks right away. It should look like this.

select.addEventListener('change', fetchBreedImage);
card.addEventListener('click', fetchBreedImage);