Why i get Error 500 fetching data with axios

Question

I am doing little project to learn and put it in my project section I get problem like this:

GET https://cors-anywhere.herokuapp.com/http://www.recipepuppy.com/api/?q=rice 500 (Internal Server Error)

Uncaught (in promise) Error: Request failed with status code 500 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.handleLoad (xhr.js:61)

I tried with using axios headers (i found this sugestion on another forum but it dosn't work) My code for fetching data looks like this

 export async function fetchData(text) {
    const proxy = `https://cors-anywhere.herokuapp.com/`;
    const base = `http://www.recipepuppy.com/api/`;
    const baseEnd = `q=${text}`;
    const data = await axios
      .get(`${proxy}${base}?${baseEnd}`)
      .then(data =>console.log(data));
    const recipes = data.data.results;
    return recipes.length > 0 ? recipes : false;
  }

function called here:

async function getRecipes(e){ 
  e.preventDefault(); 
  const text = e.target[1].value; 
  const loader = '<div class="loader"></div>'; 
  container.insertAdjacentHTML('beforebegin', loader); 
  const recipes = await fetchData(text); 
  document.querySelector('.loader').remove(); 
  displayRecipes(recipes); 
}

If you still have that error, add full code of that function and at least part of the code where you calling it. — maximelian1986
this is the code where i call a fetch export async function fetchData(text) { const proxy = cors-anywhere.herokuapp.com; const base = recipepuppy.com/api?; const baseEnd = q=${text}; const data = await axios.get(${proxy}${base}?${baseEnd}).catch(err => console.log(err)); console.log(data) return recipes.length > 0 ? recipes : false; } and this is where i call the function ` — Creativeless
and this is where i call my function async function getRecipes(e){ e.preventDefault(); const text = e.target[1].value; const loader = '<div class="loader"></div>'; container.insertAdjacentHTML('beforebegin', loader); const recipes = await fetchData(text); document.querySelector('.loader').remove(); displayRecipes(recipes); } — Creativeless
This was working 2 days ago and yesterday I wanted to code my little app and it isn't even fetching data — Creativeless
So error point you to at least 3 scripts. May be you calling getRecepies() from another async function and it also wrapped in Promise? I just few days ago fight against authorization flow in Vuejs and had same error. So to localize it I moved all my logic in "root" function and then one by one started move parts of the code to relative "child" functions. And problem was missing .catch() on some level. — maximelian1986

maximelian1986 maximelian1986 · Accepted Answer · 2020-01-29T20:30:01

You need to catch possible error from Promise (as axios.get() return Promise type object).

axios.get(`${proxy}${base}?${baseEnd}`)
  .then(data =>console.log(data))
  .catch(error => {
    console.log(error)
  })

Why i get Error 500 fetching data with axios

1 Answers