I set up the my express backend to fetch restaurant with the dish name from Yelp API, and receive the request from my frontend, but browser gave me POST http://localhost:5000/api/search/ net::ERR_ABORTED 403 (Forbidden)
.
Frontend:
item would be the dish name
let backend
if (document.location.hostname === 'localhost') {
backend = 'http://localhost:5000/'
} else {
backend = 'https://meals4yo.herokuapp.com/'
}
useEffect(() => {
fetch(`${backend}api/search/`, {
method: 'post',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({term: item})
})
.then(response => response.json())
.catch(err => {
console.log(err)
})
},[])
Backend:
app.post('/api/search', function(req, res) {
debugger
let request = axios.create({
headers: {
Authorization: `Bearer API_KEY`,
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS"
}
})
request
.get('https://api.yelp.com/v3/businesses/search', {
params: {
term: req.body.term,
location: "nyc"
}
})
.then(response => {
console.log(response.data)
res.json(response.data.businesses)
})
.catch (err => {
console.log(err)
})
})
I tried to add mode: "no-cors" and used axios to do the fetch in the frontend, none of those work