window.open()打开文件下载链接被Google Chrome拦截问题

写在前面

关于文件下载，根据目标的格式，可以有好多种方式，今天我们只探讨针对链接返回流的下载方案，window.open(流)或<a href="流"></a>,在https下可能出现下载不成功的问题。

问题描述

通过window.open(流)或<a href="流"></a>的方式去下载这个文件（通常是个URL），但是这样的方式，在https的环境下，可能出现被拦截或者闪一下（新版Chrome）的情况，导致下载失败，根本原因就是下载的URL是http的

浏览器会认为在https下打开的http链接不是人为的，所以会进行拦截，或者访问不成功

解决方案

解决方案很简单了，那就是把目标链接改成是https的，不管前端还是后端

反思

该问题会有很大的几率暴露到线上，因为通常，开发或者测试环境都是http的，这时候是不会有问题的，一旦到生产环境下，就会出现问题了。

 //http替换为https,便于下载
 $fileUrl = $ret['data']['resMsg'];
if (strpos($fileUrl, 'https') === false) {
    $fileUrl = str_replace('http', 'https', $fileUrl);
}

参考：https://www.jianshu.com/p/3a74ac9088b9
 

---

---

起因

今天售后反馈谷歌浏览器更新后下载文件不了了。自己测试发现本地127.0.0.1是没有问题的，而连接线上虽然能够下载，但是有明显的提示“无法安全的下载”，需要再次确认才能下载。初步判断为浏览器问题。

谷歌会拦截下载内容说明

尝试解决方法一

按照此方法试了下，不能本次解决问题。

尝试解决方法二

同样没有效果。

无计可施

试了多种方法后都没有效果。于是就改成<a href="下载链接">下载</a> 点击a标签直接下载。这种总没有问题吧？（这样改动好多地方都要改工作量较大）

最终解决

改成a标签后，试了下还是不行！但是这回浏览器控制台有了明显的提示。

根据提示问题就很明显了，由于线上是https的链接，而window.open()打开的链接用的都是http。在本地测试时本地是http://127.0.0.1。所以本地一直没问题，而线上存在问题。于是将返回下载链接的接口统一调整为https。（因为我们下载链接是OSS含有时效性的链接都是后台生成返回的，所以调整一个接口就完事了）

---

其实之前加载js、css等静态资源好像也有过类似http、https的提示。本次排查一直以为是window.open()的锅，绕了弯路。