Getting 401 from fetch in React - Passing sessionId

Question

I'm building react app, first screen is a login form that is calling a GET rest api resource in other host (8080)(CORS extension on chrome was installed to overcome CORS issue).

After logging in successfully, trying to perform another GET fetch but this time am getting 401!

Tried setting the credentials: 'same-origin' or credentials: 'include' (in both calls, login and second one) but it didn't help!

fetch('http://<some host>:8080/WebServices/api/SessionManager/login?userName='
        + this.state.userName + '&password=' + this.state.password,
        {
            //credentials: "include",
            //mode: "no-cors"
        })
        .then(
            (response) => {
                if (response.status < 200 || response.status > 300) {
                    console.log('Looks like there was a problem. Status Code: ' +
                        response.status);
                    this.state.showError = true;
                    this.state.errorMessage = 'Please enter a valid credentials.';

                    return;
                } else {
                    localStorage.setItem('session', response);
                    console.log("Response ======>", response);
                    window.location.href = '/main';

                }

            }
        )
        .catch((error) => {
            console.error(error);
        });

second call:

function getSession(){
   return localStorage.getItem('session').then(response => JSON.parse(response))
}

function getProjectDetails(){
   let params = getSession();

   let headers = new Headers();
   fetch('http://<host>:8080/WebServices/api/ProjectManager/getProjectDetails?userSessionId=', params
  // {
  //   //credentials: "include",
  //   //credentials: "same-origin",
  //   //crossdomain: true,
  //   //mode: 'no-cors',
  //   //headers: headers
  // }
  )
  //.then(res => res.json())
  .then((data) => {
    this.setState({ projectsDetails: data })
    console.log(data);
  })
  .catch(console.log);

} class App extends Component {

Is there a way to get the session from browser cookies and set it into the header or parameters of fetch? how can I solve it?

Answer 1

If I understand it right you are asking how to store and retrieve stored values from the cookies.

First you need to store the data you get from the first fetch with, be aware that must convert he json response to string with JSON.stringify.

localStorage.setItem('session', JSON.stringify(response));

An then you can retrieve it with:

localStorage.getItem('session');

LocalStorage has to be stored as json, and decode it after getItem().

So in order to add the session params to the second fetch you can do as follows:

function getSession(){
 return JSON.parse(localStorage.getItem('session'))
}
// second fetch,
function secondFetch(){
 var params = getSession();
 // in var params you have the data stored so now you can do the second fetch
}

I hope I've been of help to you, anything don't hesitate to ask.