CODEWITHSUNDEEP
javascriptjsonreactjsfetchpostman
Jo Ko
Jo Ko

Reputation: 7575

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

Upvotes: 7

Views: 13266

Answers (3)

keerthi c
keerthi c

Reputation: 71

instead of using localhost use Ip address

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

Upvotes: 0

user3606123
user3606123

Reputation: 94

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

Upvotes: 4

Andre Pena
Andre Pena

Reputation: 59336

Probably => is not supported by the browser you're testing this on, even though Chrome supports it. You should replace your arrow functions with regular functions and see if everything works now.

This is the list of browsers that support it:

list

source

If that's the case, you can use Babel and/or Webpack to transpile.

Upvotes: -1

Related Questions