Connect to sharepoint with rest api in spfx webpart return 403

luee johnlu 100 Reputation points
2024-04-23T17:38:50.47+00:00

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

SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,706 questions
{count} votes

Accepted answer
  1. RaytheonXie_MSFT 32,081 Reputation points Microsoft Vendor
    2024-04-24T02:39:07.81+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful