Unable to fetch Yelp Fusion with express backend

Question

I am trying fetch Yelp data in my express backend and then store the data into the state to use in the frontend, but when I try to make the request, it will throw me error with AxiosError: Request failed with status code 400 in the backend terminal.

This is the code in my backend express routes/api folder for yelp, the item would be the the name of the term that pass in from frontend.

const express = require('express');
const router = express.Router();
const axios = require('axios');


router.post('/:item', async (req, res) => {

    axios.get("https://api.yelp.com/v3/businesses/search",{
        headers: {
            Authorization: `Bearer lwP3BHKGDyMyjAEaSTV7CVWpnJyQYLH0CAVGzRxdxrwgPbV0GK52UBmBIRbRTcletnrfIVukKlseH5ze2Xojp8wr8alq9GVOFXITEyLBh2h9RS3445nZmUW6t7JpY3Y`
        },
        params: {
            term: req.params.item,
            location: "nyc"
        }
    })
        .then(response => {
            return res.json(response.data.businesses)
        })
        .catch(err => {
            console.log(err)
        })

})


module.exports = router;

The result from the terminal below:

{
  message: 'Request failed with status code 400',
  name: 'AxiosError',
  description: undefined,
  number: undefined,
  fileName: undefined,
  lineNumber: undefined,
  columnNumber: undefined,
  stack: 'AxiosError: Request failed with status code 400\n' +
    '    at settle (/Users/ronnydeng/Desktop/Classwork/MERN/Meals4You/backend/node_modules/axios/dist/node/axios.cjs:1268:12)\n' +
    '    at IncomingMessage.handleStreamEnd (/Users/ronnydeng/Desktop/Classwork/MERN/Meals4You/backend/node_modules/axios/dist/node/axios.cjs:2446:11)\n' +
    '    at IncomingMessage.emit (node:events:539:35)\n' +
    '    at endReadableNT (node:internal/streams/readable:1345:12)\n' +
    '    at processTicksAndRejections (node:internal/process/task_queues:83:21)',
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [Function: httpAdapter],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function], Blob: null },
    validateStatus: [Function: validateStatus],
    headers: AxiosHeaders {
      Authorization: 'Bearer lwP3BHKGDyMyjAEaSTV7CVWpnJyQYLH0CAVGzRxdxrwgPbV0GK52UBmBIRbRTcletnrfIVukKlseH5ze2Xojp8wr8alq9GVOFXITEyLBh2h9RS3445nZmUW6t7JpY3Y',
      'User-Agent': 'axios/1.1.3',
      'Accept-Encoding': 'gzip, deflate, br',
      [Symbol(defaults)]: [Object]
    },
    params: { term: 'Pizza', location: 'nyc' },
    method: 'get',
    url: 'https://api.yelp.com/v3/businesses/search',
    data: undefined
  },
  code: 'ERR_BAD_REQUEST',
  status: 400
}

I tried to make the fetch from fronetend with cors anywhere but it's too easy to hit the limit, so I wanna make the request from the backend.

Answer 1

Swap your request from POST to GET, just took a quick look at the Fusion dev docs and was able to query Fusion with the simple call below:

var axios = require('axios');

var config = {
  method: 'get',
  url: 'https://api.yelp.com/v3/businesses/search?location=NYC&term=cafe&sort_by=best_match&limit=20',
  headers: { 
    'Authorization': 'Bearer _961jkjpPEKGMX6YlEZm8awCLH1avefv5RUIhm6ciV_8kfRRr-gRay5GIICt9Ih-ggqoKNJdnSD7rBuIwmcbiaHSLUFWeJmOaHmzO5t4UwYvJCfX7hy38gy4IhUWX3Yx'
  }
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
}).catch(function (error) {
  console.log(error);
});

Plug your key in and give it a try;