Accessing sharepoint list using REST api with angular gives 403 error

Question

I am trying to make a call to sharepoint list using REST APIs. I am logged in to sharepoint and when in browser tab, I enter the rest url like:

https://myserver.sharepoint.com/sites/mylist/_api/lists/getbytitle('OEC_Docs')/items

It returns me the data in the browser as expected. However using the code given below in my angular 4 app throws 403 error:

getDocs(){    
  const httpOptions = {
      headers: new HttpHeaders({
          'Accept':  'application/json;odata=verbose',
          'Content-Type': 'application/json'
      })
  };

  return this.http.get(this.sharePointRestHost, httpOptions)
}

As the app is running on localhost in the same browser. So I am expecting it to work.

Please advise how to fix it.

Answer 1

You have to supply digest within the header.

You will find the necessary value in the element called '__REQUESTDIGEST'. So with jQuery you can get the value like this: $('#__REQUESTDIGEST').val().

This value needs to be added to the header:

headers: { "Accept": "application/json;odata=verbose", "X-RequestDigest": $('#__REQUESTDIGEST').val() }