Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GET request works with Postman but why doesn't it work with ReactJS fetch?

When I make a GET request on Postman, it successfully makes the GET request:

enter image description here But when I do a GET fetch in ReactJS:

var data = {
  'Content-Type': 'application/json',
  'vin': 'TESTVIN1234567890'
}

var myInit = {
  method: 'GET',
  mode: 'no-cors',
  header: data,
};

fetch('http://www.localhost:8080/ota/upload/config/', myInit)
  .then(result=>result.json())
  .then(body=>{
      console.log(body)
  });

I get the following error (with Uncaught SyntaxError pointing to the line : .then(result=>result.json())):

enter image description here

So I tested to see if fetch is correct with http://jsonplaceholder.typicode.com/posts and it fetches correctly.

What could be the issue? Anything I am missing?

EDIT

I tried the following but got 'Network response was not ok. and logged the following in EDIT 2:

  fetch('http://www.localhost:8080/ota/upload/config/', myInit).then(function(response) {
    if(response.ok) {
      response.blob().then(function(myBlob) {
        var objectURL = URL.createObjectURL(myBlob);
        console.log(objectURL)
      });
    } else {
      console.log('Network response was not ok.');
    }
  })
  .catch(function(error) {
    console.log('There has been a problem with your fetch operation: ' + error.message);
  });

EDIT 2 - ADDITIONAL INFO

enter image description here

like image 686
Jo Ko Avatar asked Aug 10 '16 02:08

Jo Ko


1 Answers

I'd recommend looking at the fetch API documentation - but I have some general advice:

1) I usually include error handling whenever fetching from an API, because you don't have enough information to know exaclty why the request failed. The docs have a decent example:

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    response.blob().then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      myImage.src = objectURL;
    });
  } else {
    console.log('Network response was not ok.');
  }
})
.catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});
  1. This is an educated guess, but based on the limited information I gathered from the error message, you're using HMR - which does modify some code - specifically related to how state is propagated within components.

So first I'd rec. console logging the error.message using the documentation as a guide (prob catch) - and if you haven't solved the problem, then I think we need more context (like where is this inrelation to a component? how are you propagating the state? etc.)

edit: or maybe it's just a typo - but still - error handling is good and there's a few 'gotchas' with using HMR

like image 86
user3606123 Avatar answered Oct 17 '22 06:10

user3606123