如何从外部HTML或ASPX页面访问在线SharePoint列表内容？

直接给你最贴合需求的方案：SharePoint REST API + 前端JavaScript，完全满足「客户端实现、无需SP管理员权限、集成到现有外部网站」的要求，下面是具体操作步骤和代码示例。

核心逻辑 #

通过SharePoint Online提供的REST API发起客户端请求，获取指定列的列表数据，再用JS把数据渲染到你的HTML/ASPX页面上。只要你对目标列表有读取权限就能用，不需要管理员做任何配置。

分步实现 #

1. 确认REST API地址 #

请求列表数据的API格式如下，替换占位符为你的实际信息：

https://<租户域名>.sharepoint.com/sites/<站点名>/_api/web/lists/getbytitle('<列表名>')/items?$select=<列名1>,<列名2>

• $select参数必须加，用来指定你要获取的特定列，避免返回冗余数据
• 自定义列要用内部名称（不是显示名）——可以在列表的列设置页面，查看浏览器地址栏里的Field=xxx参数值，那个就是内部名称

2. 处理身份验证（关键） #

外部网站访问SP Online需要用户授权，这里用Azure AD OAuth隐式流，纯客户端就能搞定，不用后端：

1. 自己在Azure AD注册一个应用（普通用户就能操作，不用管理员权限）：
   • 注册时填好你的外部网站域名作为「重定向URI」
   • 给应用添加委托权限：Sites.Read.All（仅读取权限足够）
2. 前端通过这个应用发起授权请求，拿到访问令牌后，就能调用REST API了

3. 前端代码示例（原生JS，兼容HTML/ASPX） #

<!DOCTYPE html>
<html>
<head>
    <title>SP列表数据展示</title>
</head>
<body>
    <!-- 用来渲染数据的容器 -->
    <div id="sp-data-box"></div>

    <script>
        // 替换成你的实际配置
        const config = {
            tenant: "your-tenant", // 示例：contoso
            siteName: "your-site", // 示例：SalesTeamSite
            listTitle: "Products", // 目标列表名称
            columns: "Title,ProductCategory,Price", // 要获取的列（内部名称）
            clientId: "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx", // Azure AD应用ID
            redirectUri: "https://your-external-site.com/sp-data-page.html" // 你的页面URL
        };

        // 获取访问令牌，没有的话跳转到授权页
        async function getAuthToken() {
            const urlParams = new URLSearchParams(window.location.search);
            const token = urlParams.get('access_token');
            if (token) return token;

            // 跳转授权
            const authUrl = `https://login.microsoftonline.com/${config.tenant}.onmicrosoft.com/oauth2/v2.0/authorize?client_id=${config.clientId}&response_type=token&redirect_uri=${encodeURIComponent(config.redirectUri)}&scope=https://${config.tenant}.sharepoint.com/Sites.Read.All`;
            window.location.href = authUrl;
        }

        // 调用SP REST API拿数据
        async function fetchSPListData() {
            const token = await getAuthToken();
            const apiUrl = `https://${config.tenant}.sharepoint.com/sites/${config.siteName}/_api/web/lists/getbytitle('${config.listTitle}')/items?$select=${config.columns}`;

            const response = await fetch(apiUrl, {
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Accept': 'application/json;odata=nometadata' // 简化返回的JSON结构，方便处理
                }
            });

            if (!response.ok) throw new Error(`请求失败: ${response.statusText}`);
            const data = await response.json();
            renderData(data.value);
        }

        // 把数据渲染到页面上
        function renderData(items) {
            const container = document.getElementById('sp-data-box');
            if (!items.length) {
                container.innerHTML = "<p>暂无数据</p>";
                return;
            }

            let html = "<div class='sp-list'>";
            items.forEach(item => {
                html += `
                    <div class='sp-item'>
                        <h4>${item.Title}</h4>
                        <p>分类: ${item.ProductCategory}</p>
                        <p>价格: $${item.Price}</p>
                    </div>
                `;
            });
            html += "</div>";
            container.innerHTML = html;
        }

        // 页面加载时执行
        window.addEventListener('load', fetchSPListData);
    </script>
</body>
</html>

如果是ASPX页面，直接把这段JS嵌入到页面的<script>标签里就行，逻辑完全一致。

4. 注意事项 #

• 权限验证：确保当前登录的用户对目标SP列表有读取权限，否则会返回403错误
• 跨域问题：只要用上面的OAuth流程，SP Online会自动处理CORS，不用额外配置
• 数据筛选/排序：如果需要更复杂的逻辑，可以给API加$filter、$orderby参数，比如?$select=Title&$filter=Price gt 100

为什么不选其他方案？ #

• Power Apps/Power Automate：适合快速搭建应用，但只能通过嵌入或跳转的方式集成到外部网站，无法无缝融合到现有页面
• 嵌入式Web部件：仅能在SP内部页面使用，根本没法放到外部网站
• 服务器端方案：需要后端代码，还可能要求管理员配置权限，不符合你「客户端实现」的要求

内容的提问来源于stack exchange，提问作者Benny H.