最近因为一个img标签读取服务器图片地址不能正常显示困扰了许久。
找网上找了很多资料(正常回答都是告诉你,检查你的地址路径),问了很多人,大多都给出回答是后台header头限制问题(因为是跨域)。
效果图:

但是每当切换到手机模式浏览,绝对会出现图片碎片化,或者直接不显示的情况。
解决办法:
使用Referer Meta标签控制referer,在H5 的 header加入meta
<meta name="referrer" content="never">
HTTP Referer是header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,通常被网站用来统计用户来源,是从搜索页面来的,还是从其他网站链接过来,或是从书签等访问,以便网站合理定位,服务器藉此可以获得一些信息用于处理。比如从我主页上链接到一个朋友那里,他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。
Referer有时也被用作防盗链, 即下载时判断来源地址是不是在网站域名之内, 否则就不能下载或显示,很多网站,如天涯就是通过Referer页面来判断用户是否能够下载图片。
如果 referer-policy 的值为never:删除 http head 中的 referer;
纯属遇坑分享,如果有解释不对请留言告知,及时修改
网友评论