JavaScript应用生成SharePoint Online访问令牌报CORS错误如何解决

你遇到的CORS报错是Azure AD OAuth令牌端点的官方限制，微软明确不允许浏览器端跨域发起客户端凭证流的令牌请求。除此之外你的实现存在严重安全隐患：client_secret直接写在前端代码中，任何访问页面的用户都可以通过查看源码拿到密钥，获得SharePoint站点的操作权限，风险远高于CORS问题本身，该思路从设计层面就不可行。

• 方案1：表单托管到SharePoint站点内（成本最低，优先选择）
  如果你的HTML表单不需要独立部署在外域，直接将页面上传到目标SharePoint站点的文档库中访问即可，使用SharePoint原生的SP.RequestExecutor发起REST请求，不需要手动申请令牌，SharePoint会自动携带当前登录用户的身份凭证，完全规避CORS问题。
  示例代码参考：

// 依赖SharePoint内置的SP.RequestExecutor.js
SP.SOD.executeFunc('SP.RequestExecutor.js', 'SP.RequestExecutor', function() {
  const executor = new SP.RequestExecutor(_spPageContextInfo.webAbsoluteUrl);
  executor.executeAsync({
    url: `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/getbytitle('替换为你的列表名')/items`,
    method: "POST",
    body: JSON.stringify({
      __metadata: { type: "SP.Data.替换为你的列表对应ListItem类型" },
      Title: "表单提交的标题值",
      // 补充其他列表字段对应的表单值
    }),
    headers: {
      "Accept": "application/json;odata=verbose",
      "Content-Type": "application/json;odata=verbose",
      "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
      "IF-MATCH": "*"
    },
    success: res => console.log("列表项新增成功"),
    error: err => console.log("请求失败", err)
  });
});

• 方案2：新增后端代理层（适用于表单部署在外部站点的场景）
  如果表单必须部署在独立外域，你需要新增一个简单的后端服务做请求中转：

1. 前端仅向你的后端接口提交表单数据，不涉及任何令牌申请逻辑
2. 后端安全存储client_id和client_secret，收到表单数据后由后端向Azure AD申请令牌，再携带令牌调用SharePoint REST API写入数据
   该方案既绕开了浏览器端的CORS限制，也完全避免了密钥泄露的风险，是生产环境的标准实现方案。

不要尝试任何客户端侧绕过CORS的方案，只要client_secret暴露在前端，你的SharePoint数据就不存在任何安全性。

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