WebApi项目搭配PS导出HTML文件，Localhost打开报错但线上正常求解决

常见问题排查与修复步骤 #

• 资源路径引用错误
  Adobe导出的HTML可能使用了绝对路径或在线资源地址，本地环境无法解析。检查HTML内的img、css、js等资源引用：

  • 将绝对路径修改为相对路径，例如把/static/style.css调整为./static/style.css
  • 确认本地项目的资源目录结构和导出的HTML目录完全匹配，没有缺失图片、样式等文件

• 本地运行环境差异
  直接双击打开HTML用的是file://协议，和在线服务器的HTTP协议环境不同，会触发浏览器的安全限制：

  • 用简易本地服务器启动项目：

    # Python 3 启动本地服务
    python -m http.server 8000
    # Node.js 需先安装http-server
    npm install -g http-server
    http-server
    

  之后访问http://localhost:8000打开目标HTML文件

• 浏览器安全策略限制
  部分浏览器会限制本地文件的脚本、样式加载：

  • 更换浏览器测试，比如Chrome、Firefox
  • 若用Chrome，可临时添加启动参数绕过限制（仅测试用，不建议长期开启）：

    # Windows系统
    chrome.exe --allow-file-access-from-files
    # Mac系统
    open -a "Google Chrome" --args --allow-file-access-from-files
    

• Adobe导出配置问题
  导出时可能选择了依赖在线资源的选项：

  • 重新导出HTML，选择「本地资源」「离线可用」类的选项（不同Adobe工具命名可能有差异）
  • 勾选「复制所有依赖资源到本地目录」，确保样式、脚本、图片等文件全部导出到本地项目文件夹

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