记录域名地址是https的文件渲染不出本地http地址的图片

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情”

背景

项目是https域名开头的,而且是强制以https作为domin方式. 但是由于项目中要渲染的图片绝对路径服务器不支持https来访问,这个时候就会导致图片无法正确的方式.

原因

• 谷歌浏览器在2020年之前就已经规定了,如果你当前项目的协议是https的话,那么你静态资源的加载即使是http协议,也会被强制转换为https协议.
• 如果这个图片服务器不支持https协议,那么自然就拿不到这个图片了
• 总结如下:
  • 网页请求https
  • 外链图片http
  • 外链图片不支持https
    

解决办法

所以我就有了这些解决办法.

1. 让外链图片支持https的请求
2. 让网页的服务请求变成http

第一种办法现实不可行, 第二种方法简直就是逆行时代.

解决方案一:

<img src="//demo/a1.png" />
复制代码

// 就很骚气, 对于自己的资源及支持http又支持https的时候生效。

它会根据当前访问的协议自动切换 http或htpps。

或许这个不是前端技术能够解决的问题

In Chrome 81, mixed images will be autoupgraded to https://, and Chrome will block them by default if they fail to load over https://. Chrome 81 will be released to early release channels in February 2020.

解决方案二:

<meta http-equiv="Content-Security-Policy" content="img-src http:">
复制代码

• 制定img中的src使用的协议.
• 不可能一直都是https

解决方案三:

• 后台或者运维的事情.
• 既然你现在不能解决那个 http 服务的问题，也不能限制用户，那你只能再搭建一个 https 的代理，来转发。最终的链接类似于

https://example.com/<最终访问的地址>  ，比如  https://example.com/http://baidu.com/logo.png 。 也要注意这个代理的安全性，否则一些恶意的请求可能会导致服务器陷入安全问题，比如别人访问： https://example.com/file:///etc/passwd  或者  https://example.com/http://127.0.0.1:8899等。 - 关键字：反向代理、正向代理