七牛云图床开启HTTPS请求的两种方式

https请求下的http图片

因为自己一直用的是七牛云来管理博客图片，发现在chrome下用https访问博客时看不到博客里的图片，而使用微信访问https博客却可以正常看到图片。chrome前端报错如下：

img

打开chrome开发者工具可以发现，我的http图片被自动转成了https。

查了一下原因

https网址下，不支持http协议的图片加载

Chrome自动将地址栏的http请求转成了https, 但是https网址下，不支持http协议的图片加载

我博客里面的图片是通过七牛云进行存储，但是我在七牛云对象存储还没开启https访问，于是就报错了。接下来的问题就是如何开启七牛云图床开启HTTPS请求

域名：源站域名 vs CDN加速

打开七牛云对象存储->域名管理可以看到，七牛云支持两种方式给对象存储加域名：CDN加速域名、源站域名。

img

大致意思就是，源站域名是指请求直接打到对象存储。CDN加速的话，请求会打到边缘节点（而非对象存储），当节点找不到这个图片时，才会请求对象存储。所以理论上CDN域名速度 > 源站域名速度，这也只是理论上而已。大致过程如下图：

img

空间管理页面：https://portal.qiniu.com/kodo/bucket

源站域名，在上述页面直接点击右侧“配置HTTPS”，上传SSL证书后就可以开启https访问了。

CDN加速域名，则需要点击域名标题进入到CDN域名管理页面，再配置SSL证书：

image-20231229105546240image-20231229105629291

配置SSL证书 无论哪种方式，开启HTTPS都需要申请一个SSL证书才行。

我的域名是管理在阿里云上的，所以我直接去阿里云申请免费的SSL

你还没购买的话，可以点击立即购买，选择免费的证书费用是0元。

img

完事之后可以免费创建20个证书~~

创建证书的时候，一定要填对域名呀！！

之后把Apache证书下载到本地，因为我们要把他上传到七牛云上~

img

下载后解压可以得到三个文件：

➜  7450261_static.hijerry.cn_apache ll
total 24
-rw-rw-r--@ 1 jerry  staff   1.6K  3 19 14:18 7450261_static.hijerry.cn.key
-rw-rw-r--@ 1 jerry  staff   1.6K  3 19 14:18 7450261_static.hijerry.cn_chain.crt
-rw-rw-r--@ 1 jerry  staff   2.1K  3 19 14:18 7450261_static.hijerry.cn_public.crt

打开七牛云的上传证书页面：https://portal.qiniu.com/certificate/ssl#cert

点击上传原有证书，把解压的xxx.key和xxx.public.crt的内容复制到下面两个框框内

img

然后再去 源站域名/CDN加速域名 开启HTTPS，选中这个证书就可以了~

费用对比

图床的费用有如下几个部分，价格和优惠可以查到。

  • 存储空间。0~10G 免费

  • CDN回源流量。0~10G 免费

  • 外出流量，0~100TB 0.28元/GB

  • CDN外出HTTP流量。0~10G 免费

  • CDN外出HTTPS流量。0~100TB 0.28元/GB

HTTPS方案有两种组合：

  • 源站域名：存储空间+外出流量

  • CDN加速域名：存储空间+CDN回源+CDN外出HTTPS

两种组合下，存储0~10G都是免费，而HTTPS流量都需要 0.28元/GB，焯焯焯