Connect to sharepoint with rest api in spfx webpart return 403

Question

I am using spfx to connect sharepoint with following code

import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions } from '@microsoft/sp-http';


var itemType = "SP.Data.User_x0020_FeedbackListItem";
var absoluteUri = this.props.context.pageContext.web.absoluteUrl;

const itemData: any = {
    "__metadata": { "type": itemType },
    'Title': new Date(),
    'ReportedBy': reportedby,
    'Page': page,
    'Note': note
};
const itemHeader: any = {
    'Accept': 'application/json;odata=nometadata',
    'Content-type': 'application/json;odata=verbose',
    'odata-version': '',
    "X-HTTP-Method": "POST"
};
const spHttpClientOptions: ISPHttpClientOptions = {
    "headers": itemHeader,
    "body": JSON.stringify(itemData)
};

this.props.context.spHttpClient.post(
    absoluteUri + "/_api/web/lists/GetByTitle('<LIST TITLE>')/items",
    SPHttpClient.configurations.v1,
    spHttpClientOptions);

The console return 403 auth error. Please help fix the issue

Answer 1

Hi @luee johnlu,

SharePoint Framework offers the SPHttpClient that you can use to connect to SharePoint REST APIs. A ready-to-use instance of the SPHttpClient is available on the web part/extension context and you can use it to do all kinds of web request. Following code snippet shows how you would use the SPHttpClient to retrieve the title of the current site:

this.context.spHttpClient
  .get(`${this.context.pageContext.web.absoluteUrl}/_api/web?$select=Title`, SPHttpClient.configurations.v1)
  .then((res: SPHttpClientResponse): Promise<{ Title: string; }> => {
    return res.json();
  })
  .then((web: {Title: string}): void => {
    console.log(web.Title);
  });

The SPHttpClient offers basic functionality for performing the most common web requests. It allows you also, to configure your request by, for example, specifying request headers. For example, if you wanted to issue a web request without retrieving metadata, you'd use the following code:

this.context.spHttpClient
  .get(`${this.context.pageContext.web.absoluteUrl}/_api/web?$select=Title`,
    SPHttpClient.configurations.v1,
    {
      headers: [
        ['accept', 'application/json;odata.metadata=none']
      ]
    })
  .then((res: SPHttpClientResponse): Promise<{ Title: string; }> => {
    return res.json();
  })
  .then((web: { Title: string }): void => {
    console.log(web.Title);
  });

You could refer to following document

https://www.c-sharpcorner.com/article/how-to-work-with-list-items-in-spfx-using-rest-api-retrieve-list-data-part-o/

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.