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

Question

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

it's headers not header

azium
– azium

2016-08-10 02:11:38 +00:00
Commented Aug 10, 2016 at 2:11 — azium
– azium, Commented Aug 10, 2016 at 2:11
@azium Tried but didn't work unfortunately...

Jo Ko
– Jo Ko

2016-08-10 05:30:41 +00:00
Commented Aug 10, 2016 at 5:30 — Jo Ko
– Jo Ko, Commented Aug 10, 2016 at 5:30

user3606123 · Accepted Answer · 2016-08-10 02:58:31Z

4

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

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

answered Aug 10, 2016 at 2:58

user3606123

944 bronze badges

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

3 Comments

Jo Ko Over a year ago

Tried the error handling but got the following: GET http://www.localhost:8080/ota/upload/config/ 415 () and Network response was not ok.. And as for the second suggestion, the fetch to another URL but in exactly the same way worked, so I would assume HMR is fine and so far hasn't put any troubles. What could be the issue?

Jo Ko Over a year ago

Logged the response from the server as well. Put it up on the original post.

Jo Ko Over a year ago

just checking to see if you've received my message. please let me know

keerthi c · Accepted Answer · 2018-12-07 09:22:11Z

0

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

edited Dec 7, 2018 at 9:22

answered Oct 31, 2018 at 8:52

keerthi c

811 silver badge8 bronze badges

Comments

Andre Pena · Accepted Answer · 2016-08-10 02:57:15Z

-1

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.

answered Aug 10, 2016 at 2:57

Andre Pena

59.7k53 gold badges213 silver badges257 bronze badges

1 Comment

Jo Ko Over a year ago

I am already using Babel and Webpack but still get that error

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related