前言
记录某次页面div使用v-html标签渲染图片等内容的过程
一、结论：
get请求但被设置Sec-Fetch-*请求头的图片无法展示。
二、原因：
1.本项目中的img标签发起get请求，目标链接在浏览器中发起get请求，
2.但本项目img标签的get请求->默认sec-fetch-dest为image，如下所示：
sec-fetch-dest: image
sec-fetch-mode: no-cors
sec-fetch-site: cross-site
3.浏览器输入的目标链接的get请求的sec-fetch-*等字段（网络请求的元数据描述），如下所示：
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
4.解释：
https://pics1.baidu.com/ 的服务器端根据根据这些补充数据进行细粒度的控制相应，即服务器可以精准判断请求是否合法，到底是用户真的请求的还是取用的链接，从而杜绝非法请求和攻击，提升web服务器的安全性。
5.结论：原文中的get请求但被设置Sec-Fetch-*请求头的图片无法展示。
6.截图
三、参考链接：
1 注：
sec-fetch-*等字段是http请求的headers字段，即Fetch Metadata Request Headers
2 引用上述文章的部分内容：
Fetch Metadata Request Headers
Sec-Fetch開頭的請求頭都屬於Fetch Metadata Request Headers，於2019年發佈的新草案，目前處於Editor's Draft階段，支持度還不是很高，還須要注意的是，這些請求頭都是Forbidden header，也就是不能被篡改的，是瀏覽器自動加上的請求頭，這樣也保證了數據的準確性，還須要注意的是若是資源是本地緩存加載，那麼就不會添加這些請求頭了，這也容易理解，就很少說了。web
規範的意義
近些年web領域發展迅速，可是安全問題也十分突出，從最初瀏覽器的同源模型到CSP，再到Fetch Metadata Request Headers，都是對web安全不斷的完善和增強，以往不少安全策略側重於客戶端的防禦，服務端須要識別非法請求每每比較困難，由於缺少判斷請求的依據，控制比較粗線條，而Fetch Metadata Request Headers的出現就爲服務端過濾非法請求提供了元數據，避免csrf,xssi等攻擊就很容易了。chrome