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

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(':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())):

So I tested to see if fetch is correct with 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(':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

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

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())):

So I tested to see if fetch is correct with http://jsonplaceholder.typicode./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

• javascript
• json
• reactjs
• fetch
• postman

• 1 it's headers not header – azium Commented Aug 10, 2016 at 2:11
• @azium Tried but didn't work unfortunately... – Jo Ko Commented Aug 10, 2016 at 5:30

3 Answers 3

I'd remend 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);
});

2. 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 ponents.

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 ponent? 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

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)
    });

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:

source

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