Excel JS TypeScript React加载项本地调试报错无法加载、返回Cannot GET /

• 开发环境：基于VS Code使用Excel JS、TypeScript、React技术栈开发Excel加载项，此前加载项部署至Azure运行一切正常。
• 故障现象：启动localhost服务开展本地开发调试时，Excel端弹出加载项错误提示："抱歉，我们无法加载此加载项，请确认你已连接网络/互联网，恢复联网后点击「重试」"
• 网络状态验证：本机公网连接正常，可正常访问互联网内容，但直接访问https://localhost:3000地址时页面空白，仅返回如下文本：

Cannot GET /

• 初步排查结果：已排除webpack.config.js、manifest清单文件误修改的可能，使用Yeoman Generator创建官方React TypeScript Excel加载项空项目验证时同样出现异常，npm install命令无法执行成功，无明确排查方向。

按以下顺序逐步排查，优先解决前置依赖问题再验证服务和加载项状态：

1. 修复npm install执行失败问题
   • 先检查当前npm源配置，执行npm config get registry查看源地址，如果使用官方海外源出现连接超时，切换为国内稳定镜像源：

     npm config set registry https://registry.npmmirror.com
     

   • 清空本地npm缓存，删除现有依赖锁文件和依赖目录后重装：

     npm cache clean --force
     # Windows系统用del命令删除对应文件
     rm -rf node_modules package-lock.json
     npm install
     

   • 全局Yeoman及Office模板生成工具版本不兼容也会导致创建项目、安装依赖失败，先卸载旧版本再重装最新版：

     npm uninstall -g yo generator-office
     npm install -g yo generator-office
     

2. 修复localhost:3000返回Cannot GET /问题
   • 确认服务启动命令正确：Office加载项本地调试必须使用项目模板自带的npm start命令启动，不要直接调用webpack serve不带配置参数启动，否则会丢失路由映射、https证书、静态资源路径的默认配置，导致根路径无法访问。
   • 验证本地开发证书有效性：Office加载项强制要求本地服务使用HTTPS协议，证书过期、未被系统信任都会导致服务访问异常，执行以下命令重新生成并信任本地开发证书：

     npx office-addin-dev-certs install
     

     弹出证书安装确认提示时全部选择允许/信任，操作完成后重启本地服务。
   • 检查webpack dev server配置：确认配置文件中devServer.static字段正确指向项目静态资源输出目录，publicPath字段值为/，避免资源路径映射错误导致根路径无返回内容。
3. 修复Excel端加载项加载失败问题
   • 清除Office加载项本地缓存：关闭所有Excel窗口，执行以下命令清除webview缓存后再重启Excel加载加载项：

     npx office-addin-dev-settings webview . clear
     

   • 核对manifest配置：逐一检查manifest文件中SourceLocation及所有资源请求地址的端口号，和本地dev server实际启动的端口保持一致，默认端口为3000，若修改过服务端口必须同步更新manifest内所有对应地址。
   • 关闭系统代理、VPN类网络工具：这类工具默认会拦截本地环回请求，导致Excel内嵌的webview无法访问本地服务，触发无网络的错误提示。
   • Windows系统需额外开启Excel本地环回权限，执行以下命令添加豁免规则：

     npx office-addin-dev-settings loopback-exemptions add Excel
     

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