如何在SharePoint外部对SharePoint列表/库数据执行GET/POST操作

以下两种方案均需先完成前置配置：在Azure AD中注册单页应用（SPA），配置重定向URI为你的Angular应用地址，授予列表对应读写权限并完成管理员同意。

方案一：使用PnP JS（更推荐，封装完善，代码量少） #

• 第一步：安装PnP JS相关依赖

npm install @pnp/sp @pnp/msaljsclient @azure/msal-browser --save

• 第二步：新建PnP配置文件初始化实例（比如src/app/pnp.config.ts）

import { spfi } from "@pnp/sp";
import { MSALClient } from "@pnp/msaljsclient";
import { Configuration, PublicClientApplication } from "@azure/msal-browser";

// 替换为你自己的Azure AD和SharePoint配置信息
const msalConfig: Configuration = {
  auth: {
    clientId: "你的Azure AD应用客户端ID",
    authority: "https://login.microsoftonline.com/你的租户ID",
    redirectUri: "你的Angular应用访问地址"
  }
};
const pca = new PublicClientApplication(msalConfig);
const sp = spfi("你的SharePoint站点根地址").using(
  MSALClient(pca, {
    scopes: ["https://你的租户名.sharepoint.com/.default"]
  })
);
export default sp;

• 第三步：在业务组件中调用接口写入列表数据

import sp from './pnp.config';

// 写入数据方法
async function addListItem() {
  try {
    // 替换为你的列表显示名，字段使用列表的*内部名称*而非显示名称
    const addResult = await sp.lists.getByTitle("目标列表名称").items.add({
      Title: "测试数据标题",
      CustomField: "自定义字段内容",
      NumberField: 100
    });
    console.log("写入成功，新增项ID为：", addResult.Id);
  } catch (err) {
    console.error("写入失败：", err);
  }
}

方案二：使用原生SharePoint REST API（无需额外第三方依赖） #

直接调用Angular自带的HttpClient发起请求即可，示例代码如下：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { PublicClientApplication } from '@azure/msal-browser';

// 在组件构造函数中注入HttpClient
constructor(private http: HttpClient) {}

async addListItemViaRest() {
  // 初始化MSAL实例获取访问令牌
  const pca = new PublicClientApplication({/* 替换为你自己的MSAL配置，同方案一 */});
  const account = pca.getAllAccounts()[0];
  const tokenRes = await pca.acquireTokenSilent({
    account: account,
    scopes: ["https://你的租户名.sharepoint.com/.default"]
  });

  // 构造请求头
  const headers = new HttpHeaders({
    'Authorization': `Bearer ${tokenRes.accessToken}`,
    'Accept': 'application/json;odata=nometadata',
    'Content-Type': 'application/json',
    'If-Match': '*'
  });

  // 构造请求地址和请求体
  const reqUrl = `https://你的租户名.sharepoint.com/sites/你的站点名/_api/web/lists/getbytitle('目标列表名称')/items`;
  const postData = {
    Title: "测试数据标题",
    CustomField: "自定义字段内容"
  };

  // 发起POST请求
  this.http.post(reqUrl, postData, { headers }).subscribe({
    next: (res) => console.log("写入成功", res),
    error: (err) => console.error("写入失败", err)
  })
}

注意事项 #

• 所有列表字段请使用内部名称，不要使用页面上显示的自定义显示名，避免字段匹配失败
• 权限遵循最小可用原则，尽量只给指定站点/列表的读写权限，不要授予全租户级别的权限
• 跨域问题可通过Azure AD应用的CORS配置自动处理，无需额外配置反向代理

内容的提问来源于stack exchange，提问作者Deep Ponkiya