Fetch in React Uncaught (in promise)

Question

I'm getting this error on a fetch in React:

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

I have already found that the issue is that fetch is adding http://localhost:3000/ to the beginning of the url request and I do not know why.

This is my fetch:

export function getRecipes(ingredients, dish) {
    const url = `www.recipepuppy.com/api/?i=${ingredients}&q=${dish}`;
    console.log(url)
        return dispatch => {
            //dispatch(setRecipesRequest());
            fetch(url, {
                method: 'GET'
            }).then(response => response.json())
              .then(json => {
                  console.log('recipes', json);
                  setRecipes(json);
                });
        }

}

Even though I have specified the url, this is the request URL that the Network tab displays on google chrome:

http://localhost:3000/www.recipepuppy.com/api/?i=asdasd&q=asdasd

And I need it to be:

www.recipepuppy.com/api/?i=asdasd&q=asdasd

no problem, ill add it as the answer :) edit: feel free to mark the answer I provided as correct if you feel its correct. — Stephen
– Stephen, Commented May 9, 2018 at 15:20

Stephen · Accepted Answer · 2018-05-09 15:23:14Z

1

To define a external request, you need to define the protocol, otherwise it will be relevant to your domain.

Adding http/s to the start of the request should solve your issue

const url = http://www.recipepuppy.com/api/?i=${ingredients}&q=${dish};

Example from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

answered May 9, 2018 at 15:23

Stephen

1,1199 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetch in React Uncaught (in promise)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related