ReactJS嵌入SharePoint列表iFrame时连接被拒，如何解决？

问题原因 #

SharePoint默认通过X-Frame-Options或Content-Security-Policy响应头限制外部站点以iframe嵌入其页面，这是安全防护机制，因此会出现"refused to connect"错误。

可行解决方案 #

1. 配置SharePoint允许指定域名嵌入（需管理员权限） #

如果拥有SharePoint租户或站点管理员权限，可以添加React应用的域名到允许嵌入的列表：

• 通过SharePoint管理中心操作：
  1. 登录SharePoint Admin Center
  2. 进入设置 > 服务设置 > HTML字段安全
  3. 将你的React应用部署域名添加到"允许的外部域"列表
• 通过PowerShell操作：
  先安装SharePoint Online Management Shell，再执行以下命令：

  Connect-SPOService -Url https://your-tenant-admin.sharepoint.com
  Set-SPOTenant -IFrameEmbedableDomain "your-react-app-domain.com"
  

  配置完成后等待数分钟生效，即可尝试重新嵌入iframe。

2. 直接调用SharePoint REST API渲染列表（推荐） #

放弃iframe限制，通过SharePoint REST API获取列表数据，用React组件自定义渲染，这种方式更灵活且不受嵌入限制：

import React, { useState, useEffect } from "react";

function SharePointListViewer() {
  const [listItems, setListItems] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 替换为你的SharePoint列表API地址
    const listApiUrl = "https://your-sharepoint-site/personal/your-account/_api/web/lists/getbytitle('Test')/items";
    
    // 注意：需根据实际场景处理身份验证
    fetch(listApiUrl, {
      headers: {
        "Accept": "application/json;odata=nometadata",
        "Authorization": "Bearer " + localStorage.getItem("spAccessToken") // 适配你的认证方式
      }
    })
    .then(response => response.json())
    .then(data => {
      setListItems(data.value);
      setIsLoading(false);
    })
    .catch(error => {
      console.error("获取列表数据失败:", error);
      setIsLoading(false);
    });
  }, []);

  if (isLoading) return <div>加载中...</div>;

  return (
    <div className="list-viewer">
      <h2>Test 列表数据</h2>
      <table border="1" cellPadding="8">
        <thead>
          <tr>
            <th>ID</th>
            <th>标题</th>
            {/* 根据你的列表字段添加更多表头 */}
          </tr>
        </thead>
        <tbody>
          {listItems.map(item => (
            <tr key={item.Id}>
              <td>{item.Id}</td>
              <td>{item.Title}</td>
              {/* 渲染其他自定义字段 */}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default SharePointListViewer;

• 身份验证补充：
  • 若React应用部署在SharePoint租户内（如SPFx Web部件），可直接使用内置上下文认证
  • 若为外部应用，需在Azure AD注册应用，授予Sites.Read.All等权限，通过OAuth2获取访问令牌

3. 将React应用部署为SharePoint客户端Web部件 #

如果你的React应用是专为SharePoint开发的，可使用SharePoint Framework (SPFx) 将其打包为Web部件，部署到SharePoint站点后，直接在页面中添加该Web部件，自然集成列表视图，完全避免跨域嵌入问题。

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