Microsoft 365 Excel插件中Fetch请求HTTP接口报错的解决方法咨询

问题描述 #

我用Yeoman Generator生成的Microsoft 365 Excel Add-in里编写了基础JS函数，需要从指定URL获取数据：

• 请求HTTPS链接时功能正常；
• 请求HTTP链接时抛出TypeError: Failed to fetch错误，已知直接请求HTTP存在限制，想了解可行解决办法；
• 已在HTML文件中添加<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">；

相关代码：

// Fetch json value
console.log(`Fetching`);
var url = "http://<ip>:<port>/fetch_api";
//var url = "https://api.publicapis.org/entries";
const response = await fetch(url, {
  method: 'GET',
  headers: {
    accept: 'application/json',
  },
});

if (!response.ok) {
  throw new Error(`Error! status: ${response.status}`);
}

const result = await response.json();
console.log(result);

可行解决办法 #

1. 升级后端服务为HTTPS #

这是最彻底的解决方案。Office Add-in运行在受浏览器安全策略约束的环境中，默认禁止从HTTPS页面发起HTTP请求（混合内容限制）。即使添加了upgrade-insecure-requests元标签，如果后端不支持HTTPS，这条指令无法完成请求升级，最终还是会失败。

你可以给后端配置SSL证书：生产环境用Let's Encrypt等免费可信证书，开发环境可以使用自签名证书（需在测试设备上手动信任该证书）。

2. 配置开发代理服务器 #

在开发阶段，可通过代理服务器转发HTTP请求，规避混合内容限制：
如果是Yeoman生成的项目（通常基于Webpack），可以在webpack.config.js中添加代理配置：

module.exports = {
  // 其他原有配置...
  devServer: {
    proxy: {
      '/fetch_api': {
        target: 'http://<ip>:<port>',
        changeOrigin: true,
        secure: false, // 允许代理到HTTP协议的服务
        pathRewrite: { '^/fetch_api': '/fetch_api' }
      }
    }
  }
};

然后修改前端请求的URL为相对路径：

var url = "/fetch_api";

这样请求会先发送到本地开发服务器，再由服务器转发到目标HTTP后端，绕过浏览器的混合内容检查。

3. 临时调整Office安全设置（仅开发环境慎用） #

仅在本地测试场景下，可临时修改Office的安全设置允许混合内容，但绝对不能用于生产环境：

• Windows平台：通过修改注册表添加信任的HTTP站点；
• Mac平台：通过终端命令调整Office内置WebView的安全策略。
  这种方式存在安全风险，可能导致恶意内容注入，仅作为开发阶段的临时方案。

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