a标签下载文件，覆盖当前页面，跳转空白页问题

利用a标签下载文件，偶现跳转空白页

问题前景：

在系统测试过程中偶然发现，页面需要下载文件时，偶尔会出现，要本页面出现空白，要下载的文件链接覆盖了当前页面地址，图片如下：

该问题在谷歌浏览器上难以复现，可尝试360浏览器等

1. 正常情况，下载文件地址不会改变
   
   出现问题后，当前页面链接如下：（变为文件下载地址）
   
   导致本页面内容消失，需要浏览器回退，但不影响下载。

2. 经过观察后发现，请求头区别

正常情况：

有问题后：

解决方案

代码：

downFile(fileId){
    let downloadHref='/insureTrace/file/downloadFile?fileId='
    let link = document.createElement('a')
    // 尝试设置target也不行
    // link.target = "_blank"; 
    link.href = downloadHref + fileId;
    link.setAttribute('rel','noopener noreferrer');  // 增加这句
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
},
   

在原有代码基础上增加了link.setAttribute(‘rel’,‘noopener noreferrer’);

原理

a标签在下载文件时，犹豫安全策略的限制，会对链接进行网络劫持，之后重定向。可以用该属性解决此问题。经过多次测试没有再发现空白情况出现。如果仍然有情况出现，可以尝试将要下载的文件地址的协议由http改为https。

rel属性说明: 标签属性 rel=“noopener noreferrer“ 原来这么有用