FAQ: Requests II - fetch() GET Requests IV

This community-built FAQ covers the “fetch() GET Requests IV” exercise from the lesson “Requests II”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction To JavaScript

FAQs on the exercise fetch() GET Requests IV

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

I’ve followed all the steps and checked them thrice. But the code doesn’t work. There are no errors from the test. But, upon submitting the word request on the website panel, no response is printed.
Not even using the “Give me the solution option”

2 Likes

I did everything as asked also took the solution from the system but the code doesn’t work. Upon checking the web console, got “Cross-Origin Request Blocked:”. Can someone include this in the lesson and explain why it happens?

3 Likes

Hi @oepa_one and @amit.naik
I also completed the exercise but it did not display anything. I can explain the problem but unfortunately, the solution is a bit difficult to implement, especially if not done on your local server.

Anyway, if you inspect the page and check the web console the error is

Access to fetch at 'https://api.datamuse.com/words?sl=testing' 
from origin 'https://b012ad7f62763a67b7ad2e5e6683c681.geppetto.cc-propeller.cloud' 
has been blocked by CORS policy: 
The 'Access-Control-Allow-Origin' 
header has a value 'https://7b64062ce855345e8942f3157a8afcfa.geppetto.cc-propeller.cloud'
that is not equal to the supplied origin. 
Have the server send the header with a valid value, or, if an opaque response serves your needs,

> set the request's mode to 'no-cors'

If you check the 'https://7b64062ce855345e8942f3157a8afcfa.geppetto.cc-propeller.cloud' you will find that the server is replying with Internal Error

After some googling to see how to

set the request’s mode to ‘no-cors’

I have found this explanation which is a bit technical

Explanation of the underlying problem
So I was not able to solve the problem
Hopefully, someone @ Code academy will respond to the issue

3 Likes

Could we get a response to this please?

const getSuggestions = () => {
const wordQuery = inputField.value;
const endpoint = ${url}${queryParams}${wordQuery};

fetch(endpoint).then(response => {
if (response.ok) {
return response.json();
}
throw new Error(‘Request failed!’);
}, networkError => {
console.log(networkError.message)
})
.then(jsonResponse => {
renderResponse(jsonResponse);
})
}

My code passes every checkpoint, soooooo…where’s the functionality?

1 Like

There’s an error in the library code for this exercise.

The following function contains 2 bugs; response in lines 40 & 41 should read res

04

I was able to successfully use renderResponse and get some results, but still see some errors with regards ‘The Same Origin Policy’ others were seeing.

Is this something to do with caching? I think the ones that are returning this error are words I’ve used previously in these exercises. If I pick other words I definitely haven’t used previously, I get results.

The link you provided explains how to make this work, but there’s quite a bit of information there, so it boils down to doing this: put the following proxy URL at the front of your original URL: https://cors-anywhere.herokuapp.com/. This means that your URL declaration might look like so:

const url = 'https://cors-anywhere.herokuapp.com/https://api.datamuse.com/words';

Yes, it looks odd, but it works.

3 Likes

Thanks, @chuckwondo. That indeed did fix the cross origin issue.
It would be reassuring to know if the Codecademy team was monitoring these boards. Can imagine it would be a bit maddening for a student who didn’t think to check the forums, or to view the browser console for errors.

Ron

2 Likes

Hello, thanks! it works. but why is it? and why didn’t the instruction told us to put this in before? Thanks!

Hello,

How does the main,js access the renderResponse functon in helperFunction.js file as they have not been exported here

Hello @chloeoscar

How does the main,js access the renderResponse function in helperFunction.js file as they have not been exported here

hello @chuckwondo

How does the main,js access the renderResponse function in helperFunction.js file as they have not been exported here

Hi there

I’m also interested to know if someone from Codecademy is monitoring these boards on a regular basis, or is the expectation that the answers will be provided by other students?

Many thanks

curious too, the thing i love most about codecademy is the instructor who can help here, since they don’t have that function anymore it is a bit harder to latch on. I truly appreciated all the people who helped here, but also wondering whether these are just nice students helping or actually staffs supporting the community.