H5打开外链失败

问题

在 H5 页面使用 JS 代码下载 apk 文件

1
window.open('http://xx.apk');

表现在 Chrome 上新窗口一闪而过，部分手机浏览器有问题，本地部署调试时没有问题

原因

线上 H5 地址是 HTTPS，而外链是 HTTP，所以被 Chrome 和部分手机浏览器拦截了；而本地部署的地址是 HTTP，所以没问题

方法

外链替换为 HTTPS

记录下自己这个 case 的具体做法：

  1. 七牛云申请一个 HTTPS 的加速域名，想要申请一个 image.xx.com 的域名，提示需要 HTTPS 证书
  2. 到域名提供商，如腾讯云，申请一个二级域名证书。之前的证书只能支持一级域名，方法是点击 Chrome 左上角的锁查看颁发对象，如果是 xx.com 就是只支持一级，如果是 *.xx.com 就是泛域名证书。由于我的是一级证书，因此需要重新申请一个。腾讯云的泛域名证书需要付费，而单个的二级域名不需要。详情点击 腾讯云 SSL 证书，选择自动解析 DNS
  3. 下载 SSL 证书，选择 pem 格式
  4. 上传到七牛云，上传 pem 和 key 两个文件
  5. 添加 image.xx.com 的加速域名
  6. 到腾讯云为该域名添加 CNAME 解析，主机记录填写 image 即可，value 值填写七牛云给的加速域名。意思是凡是访问 image.xx.com 这个域名，统统先解析为七牛云给的加速域名，再解析为其对应的 IP 地址。这样哪天七牛云换了 IP 地址，你的这个域名就依然生效

由于腾讯 SSL 证书只有一年有效期，到期后需要手动更新，重复步骤 2-4，然后在七牛云该证书页面点击部署到 CDN 即可

  1. 问题
  2. 原因
  3. 方法