从Outlook Web加载项调用Azure函数生成令牌，网页端正常桌面端失败

核心问题分析 #

你的代码在桌面端失败的核心原因是同步Ajax请求（async:false）。Outlook桌面客户端基于WebView2（Windows）/WebKit（Mac）环境，这类现代Web运行时会严格限制主线程的同步XMLHttpRequest，直接导致请求被拦截或执行失败；同时同步写法本身也不符合异步编程规范，容易引发性能阻塞问题。

修正后的实现方案 #

1. 改为异步Promise风格请求 #

抛弃同步Ajax，改用异步方式处理请求，避免主线程阻塞：

async function GenerateGraphToken() {
  console.log('in GenerateGraphToken');
  const serviceURL = "https://xxxxxxxxxxx.azurewebsites.net/api/Function1";
  
  try {
    const response = await fetch(serviceURL, {
      method: "GET",
      headers: {
        'x-functions-key': 'xxxxxxxxxxxxx'
      }
    });
    
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    
    const data = await response.text(); // 若Azure函数返回JSON，改用response.json()
    localStorage.clear();
    localStorage.setItem("token", data);
    return data;
  } catch (ex) {
    console.log("获取用户令牌失败:", ex);
    throw ex; // 抛出错误让调用方处理
  }
}

2. 调整调用逻辑 #

由于改为异步函数，调用时需用await或.then()处理结果：

// 调用示例
async function getTokenAndExecute() {
  try {
    const token = await GenerateGraphToken();
    // 此处编写拿到令牌后的业务逻辑
  } catch (err) {
    // 处理错误场景
  }
}

3. 桌面端特殊适配要点 #

• 跨端存储优化：如果桌面端对localStorage有访问限制，建议改用Outlook加载项官方推荐的Office.context.roamingSettings存储令牌，实现跨客户端（网页/桌面/移动）同步：

  // 替换localStorage为roamingSettings
  Office.context.roamingSettings.set("token", data);
  Office.context.roamingSettings.saveAsync(function(result) {
    if (result.status === Office.AsyncResultStatus.Succeeded) {
      console.log("令牌已保存到漫游设置");
    }
  });
  

• CORS配置保持：无需修改Azure函数的CORS配置，桌面端WebView环境会将加载项视为可信源，现有配置可正常生效。
• Office.js初始化：确保所有网络请求在Office.onReady()完成后执行，避免加载项未初始化导致的API调用失败。

关键注意事项 #

• 禁止在主线程使用同步XMLHttpRequest，这是现代Web环境的通用禁忌，也是Outlook桌面端加载项的核心限制。
• 所有异步操作必须完善错误处理，避免静默失败难以排查。
• 使用roamingSettings替代localStorage是Outlook加载项跨端适配的最佳实践。

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