0

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

PhobosFerro
  • 737
  • 6
  • 18
Ronny
  • 1
  • 1

0 Answers0