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!
Console error messages:
Screen Shot 2020-10-26 at 10.44.04 AM|690x75
Link to project part 4:
https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-four/projects/interacting-with-yelp-api!
Here is my Yelp.js and App.js:
const apiKey =
"removed";
const Yelp = {
search(term, location, sortBy) {
return fetch( `https://corsanywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}
`,
{
headers: {
Authorization: `Bearer ${apiKey}`
}
}
)
.then((response) => {
return response.json();
})
.then(jsonResponse => {
console.log(jsonResponse.businesses)
if (jsonResponse.businesses) {
return jsonResponse.businesses.map(business => {
return {
id: business.id,
imgSrc: business.image_url,
name: business.name,
address: business.location.address1,
city: business.location.city,
state: business.location.state,
zipCode: business.location.zip_code,
category: business.categories[0].title,
rating: business.rating,
reviewCount: business.review_count
};
});
}
});
},
};
export default Yelp;
And here is my App.js:
import React from "react";
import "./App.css";
import BusinessList from "./../BusinessList/BusinessList";
import SearchBar from "./../SearchBar/SearchBar";
import Yelp from "./../../util/Yelp";
class App extends React.Component {
constructor(props) {
super(props)
this.state = { businesses: [] }
this.searchYelp = this.searchYelp.bind(this);
}
searchYelp(term, location, sortBy) {
console.log(`searchYelp fired off`)
Yelp.search(term, location, sortBy)
.then(businesses => {
console.log(businesses)
this.setState({
businesses: businesses
})
})
}
render(){
console.log(this.state.businesses)
return (
<div className="App">
<h1>tumtum.</h1>
<SearchBar searchYelp={this.searchYelp} />
<BusinessList businesses={this.state.businesses} />
</div>
)
};
}
export default App;
