I am stuck on the last part of Ravenous, part 4. I am having trouble getting a good response from the Yelp API. I followed the instructions carefully and did some troubleshooting, but keep getting an error in the browser related to cors-anywhere.
I can confirm that Yelp.js’s search function is firing with a console.log, but it seems like the issue is with cors, because the request doesn’t "pass the access control check: No ‘Access-Control-Allow-Origin’ header is present. I have tried adding that header in but it didn’t work. Maybe I didn’t do it right but there’s nothing about that header in the instructions. Please help! Thanks!
I’m not sure how it’s happened, because the code you’ve posted seems to be fetching the right URI… but the error you’re getting is attempting to fetch https://api.jquery.com/jquery.getjson/https://api.yelp.com/v3/businesses/search?term=taco&location=&sort_by=best
If your code is attempting to directly fetch this URI from your local machine, which the presence of localhost would suggest, then the CORS error is expected - it’s what CORS Anywhere is there to address in this project.
Do you have an unsaved edit somewhere, or an error with the URI you’re passing to fetch() in the Yelp component?
You could have an issue in the SearchBar component since that one gets passed searchYelp function as a prop and uses searchYelp in the handleSearch method. Perhaps post that code as well.
Otherwise, just noticed a small issue in Yelp.js which may prevent images from rendering. Check the key-value pair of imgSrc: business.image_url. I think it should be imageSrc: business.image_url in order to match what gets displayed as an image in the Business component. But this is not your major issue.
Thanks but I actually got this working. The frustrating part is I don’t know how. I tried another method I found online, then went back to my old way and it all of a sudden worked. I did realize the image_url / imageSrc thing and fixed that.
Thanks, I added the dash and it didn’t seem to change. I actually got this working. The frustrating part is I don’t know how. I tried another method I found online, then went back to my old way and it all of a sudden worked.
Thanks but I actually got this working. The frustrating part is I don’t know how. I tried another method I found online, then went back to my old way and it all of a sudden worked. The path I sent to fetch in Yelp seemed fine. I am now running into this exact same issue with the next project, Jammming.
My response from the search function in Yelp.js, and now in Spotify.js comes back as undefined…then when you console.log the jsonResponse, it is this cors anywhere stuff instead of Spotify data…
Any further wisdom on this? I can supply code for the Jammming project too, but maybe I need to make another post.