Outlook add-in生产与开发部署：如何简化测试流程解决本地CORS问题

现存问题梳理 #

通过yeoman generator生成的React技术栈Outlook插件，已实现war包部署到Oracle WebLogic Server的全流程，但存在两个核心测试痛点：

• 代码微调后必须走全量打包部署流程才能验证效果，步骤冗余：
  1. 执行npm run build生成dist目录
  2. 打包生成war文件
  3. 将本地war包复制到指定网络共享目录
  4. 登录Oracle服务器完成应用发布操作
• 尝试localhost本地部署测试时，因CORS策略限制无法调用后端API，无法完成本地验证

项目webpack.config.js现有环境地址配置如下：

const urlDev = "https://localhost:3000/";
const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION

可落地的优化方案 #

方案1：本地热更新开发（效率最高，优先尝试） #

直接跳过war打包、服务器部署环节，本地启动开发服务对接Outlook调试，改代码后秒级生效，核心解决两个卡点：

1. 解决本地CORS报错：配置webpack devServer反向代理，无需后端修改CORS配置。在webpack配置的devServer节点添加代理规则，将前端发起的API请求自动转发到Oracle服务器上的正式后端接口，浏览器侧判定为同域请求，不会触发跨域拦截。参考配置：

   devServer: {
     port: 3000,
     https: true, // Outlook插件强制要求HTTPS环境，必须开启
     hot: true, // 开启模块热替换，改代码后无需手动刷新即可看到效果
     proxy: {
       // 匹配项目中所有后端接口的路径前缀，按实际业务路径修改
       "/api": {
         target: "https://你的Oracle服务器服务访问地址",
         changeOrigin: true,
         secure: false // 若服务器使用自签名SSL证书，开启该项跳过证书校验
       }
     }
   }
   

   如果临时调试不想改webpack配置，可以单独建一个用于开发的Chrome快捷方式，在快捷方式目标路径末尾追加启动参数 --disable-web-security --user-data-dir=C:\dev\chrome-test-profile，用这个快捷方式打开的Chrome实例会默认关闭CORS校验，仅用于本地开发，不要用它访问公网站点。
2. 本地加载插件调试：执行npm run start启动本地开发服务后，打开Outlook（网页版/桌面版均可）的插件管理页，选择「加载自定义加载项」，直接上传项目内dev模式对应的manifest清单文件（yeoman生成的项目默认已经把dev环境清单里的资源地址指向https://localhost:3000，无需手动修改），即可正常加载本地运行的插件。开启热更新后，修改组件、样式代码保存后会自动同步效果，完全不需要走部署流程。

方案2：增量同步部署（适配本地服务受公司策略限制的场景） #

如果公司网络、证书策略限制导致本地服务无法被Outlook加载，不用每次全量打包war重部署：

• 执行npm run build:watch命令，让webpack监听本地代码变化，自动增量编译更新dist目录内容，不用每次手动执行build
• 用文件同步工具把本地dist目录的内容，实时同步到WebLogic服务器上对应war包解压后的静态资源目录，代码保存后1-2秒即可完成同步，刷新Outlook就能看到修改效果，省去打包war、上传、重新发布的步骤。

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