Get Request Works With Postman But Why Doesn't It Work With Reactjs Fetch

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

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

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

POST request is working fine with postman but not in website

When making a call from an website there are security considerations to be taken into account. One of them is CORS.

In a nut shell the browser asks the server if it allows HTTP calls (calls that are considered not simple actually).

Postman works because it doesn't do this check.

G4G need to respond to OPTIONS requests with a proper CORS response that allows your host to call them.

Request works on Postman, but is received as 'undefined' by FETCH

Issue is that the body encoding is different in the browser example from the postman example.

The body in your post request should be a string (example below), when using the content-type you are currently using.

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'from=xxxxx&to=yyyyyy....etc'
  })

Or you can change the content-type and stringify the object.

fetch(url, {
    method: 'post',
    headers: {
    Content-Type: 'application/json',
    // 'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: JSON.stringify(formInfo)
})

HTTP request working from Postman and Node but not React

Get request working on Postman, but not in React.js?

You're trying to use basic access authentication this works in Postman because Postman isn't doing an AJAX request, browsers simply do not let you pass that information in an AJAX request URL.

Previously answered here!

You can pass auth as an option to your axios.get call like this:

axios.get(
  'http://mywebsite.com:4040/api/stuff/stuff2', 
   {
     auth: {
       username: 'username',
       password: 'password'
     }
   }
)

React native API request with fetch() to getmati API respond well in postman, but not working in App and got 400 error

From the documentation you mentioned it seems like its accepting form data and you are sending search params. Try this

const formData = new FormData();
formData.append("grant_type","client_credentials");

const myoptions = {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded',
    Authorization:
      'Basic AAAAAAAAAAAAAAAAAAAAAAAAAAA',
  },
  body: formData,
};

fetch('https://api.getmati.com/oauth', myoptions)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

---

Related Topics