0

Link-1: https://abc.sharepoint.com/sites/site-1/ Link-2: https://abc.sharepoint.com/sites/site-2/

Using SPFx, From Link-1 site webpart, I want to get list items from Link-2 site.

I tries axios, fetch and pnp it works well in workbench but while deploy webpart at that time it throws Unauthorized exception.

Please share advise here.

1

1 Answer 1

0

I just tried the following test that shows a web part hosted in one site can access list items from another site as long as the current user has access to both sites.

This sample uses the SPHttpClient type to get data from the Categories list in the Demo site.

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

//...

protected get isRenderAsync(): boolean {
  return true;
}

public async render(): Promise<void> {
  const response: SPHttpClientResponse = await this.context.spHttpClient.get(
    "https://robwindsortest991.sharepoint.com/sites/Demo/_api/Web/Lists/GetByTitle('Categories')/Items",
    SPHttpClient.configurations.v1
  );

  if (response.ok == false) {
    const responseError: string = await response.text();
    this.context.statusRenderer.renderError(this.domElement, responseError);  
    this.renderCompleted();
    return;
  }

  const jsonResponse: any = await response.json();

  let categoryItems: string = "";
  jsonResponse.value.forEach((category: any) => {
    categoryItems += "<li>" + category.Title + "</li>";
  });

  this.domElement.innerHTML = `
  <section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
    <div class="${styles.welcome}">
      <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
      <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
      <div>${this._environmentMessage}</div>
      <div>Web part property value: <strong>${escape(this.properties.description)}</strong></div>
    </div>
    <div>
      <h3>Categories</h3>
      <ul>
        ${categoryItems}
      </ul>
    </div>
  </section>`;

  this.renderCompleted();
}

If I package an deploy this web part and then add it to a page in the Demo2 site, users who have permissions to access both sites see the list data.

enter image description here

However, users who have permissions to access to the Demo2 site, but who don't have permissions to access to the Demo site, get an error.

enter image description here

5
  • Thanks, Rob for your quick reply! I used your code but getting 403 (Unauthorized access) response code. Even user has full access on site. Please advise here.
    – Parth Shah
    Sep 15, 2022 at 16:53
  • What happens when the user navigates to the list containing the data in SharePoint? Sep 15, 2022 at 17:35
  • I am trying to access Site Pages library. Link: abc.sharepoint.com/sites/Templates/_api/lists/… Above link is accessing in browser but with your code it throws 403 error.
    – Parth Shah
    Sep 15, 2022 at 17:43
  • The REST API URL to access the Site Pages library should end with /_api/Web/Lists/GetByTitle('Site%20Pages')/Items. The URL in your comment above is missing Web Sep 15, 2022 at 19:28
  • abc.sharepoint.com/sites/Templates/_api/web/lists/…. This link also throws 403 error.
    – Parth Shah
    Sep 16, 2022 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.