前端页面下载服务端生成的PDF文件失败该如何排查解决？

问题现象 #

结算组件上线后的页面中，手动将href链接指向结算完成后服务端生成的PDF文件，该PDF本身无异常可直接打开，但客户端点击下载链接时始终失败。

错误代码示例 #

<div>
  <div class="container">
    <h3>您的购买已成功！</h3>
    <h4>
      如需下载发票，请
      <a
        href="/../server/Inovice.pdf"
        download="Inovice.pdf"
      >
        点击此处
      </a>。
    </h4>
  </div>
</div>

问题根因 #

故障由href属性中URL开头的/导致：
开头带/属于绝对路径写法，代表从站点的根目录开始定位资源，路径/../server/Inovice.pdf会尝试从根目录向上回溯一级，属于非法路径，会直接被服务端的安全策略拦截，因此下载失败。

修复方案 #

删除URL开头的/，改为相对路径写法即可，修改后代码如下：

href="../server/Inovice.pdf"

不带开头/的相对路径会从当前页面所在的目录开始向上回溯一级，再进入server目录匹配PDF文件，路径符合实际资源存储规则，可正常触发下载。

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