return fetch(`{SERVICE API URL}`, {
  method: 'GET',        
  headers: {
    'userName': "username",
    'password': "password",
    'content-type': 'application/json'
  }
})
.then(response => response.json())
.then(json => dispatch(receivePosts(reddit, json)))

I'm trying to get service API data with authorization headers, but getting 401 - Unauthorized error and the response is Missing Request Headers.

Tried with sending authorization content with body also - getting same error 401 - Unauthorized error.

Edited:

 headers: {
        'userName': "xyz",
        'sessionToken': "xyz................."
      }

When I'm checking with Postman client it is working fine, but not with the redux-saga fetch method. Kindly help me for this.

return fetch(`{SERVICE API URL}`, {
  method: 'GET',        
  headers: {
    'userName': "username",
    'password': "password",
    'content-type': 'application/json'
  }
})
.then(response => response.json())
.then(json => dispatch(receivePosts(reddit, json)))

I'm trying to get service API data with authorization headers, but getting 401 - Unauthorized error and the response is Missing Request Headers.

Tried with sending authorization content with body also - getting same error 401 - Unauthorized error.

Edited:

 headers: {
        'userName': "xyz",
        'sessionToken': "xyz................."
      }

When I'm checking with Postman client it is working fine, but not with the redux-saga fetch method. Kindly help me for this.

• javascript
• reactjs
• redux
• authorization
• redux-saga

• seems like a typo in actual code.. can you confirm?? – harishr Commented Jul 7, 2017 at 14:40
• Worth trying credentials: 'same-origin'. – Martin Dawson Commented Jul 11, 2017 at 16:19
• Do you have access to the Backend code? If it's Yes, then what language do you use for backend? – Radu Nemerenco Commented Jul 12, 2017 at 13:37
• Yes, I'm having backend code - JAX-RS. but I don't know java still I can try... – KumarA Commented Jul 12, 2017 at 14:07
• have you tried lowercase 'username' and 'sessiontoken' keys rather than 'userName' and 'sessionToken'? – brommersman Commented Jul 14, 2017 at 8:32

4 Answers 4

Looks like it's a backend problem - CORS Filter configuration

If the backend is on a different server (could be on the same machine, but in a different Application Server, in other words, on a different port) you have to do some CORS Filters configurations.

The frontend code is running on a server - that means it's an application. Postman is a client, just like Google Chrome or any other browser. That's the explanation why you can do the request without any problem from Postman but unsuccessful from your frontend application.

I guess you enabled the Access-Control-Allow-Origin header on the backend

Now you have to allow your custom headers with Access-Control-Allow-Headers

Whenever I use fetch and I need to add headers to the request I do it this way:

headers: new Headers({
  Accept: 'application/json',
  Authorization: token,
  'Content-Type': 'application/json',
}),

so you might want to try this approach, also in order to debug this issue you might want to check your Netowrk tab and verify which headers are sent with the request.

You need to add an Authorization bearer header.

For instance:

headers = new Headers({
    'Authorization': `Bearer ${authorizationCodeOrCredentials}`
});

In your code:

return fetch(`{SERVICE API URL}`, {
  method: 'GET',        
  headers: {
    'Authorization': 'Bearer ' + someValue, // Add this line
    'userName': "username",
    'password': "password",
    'content-type': 'application/json'
  }
})
.then(response => response.json())
.then(json => dispatch(receivePosts(reddit, json)))

If you are using Linux system & If you have chrome in it...

Run your chrome using following mand

/opt/google/chrome/chrome --disable-web-security --user-data-dir

Try now, If everything works fine then it's CORS issue from Backend.