继 【上传到微信服务器的图片在前端显示“此图片未经允许不可使用”
】 这篇文章之后衍生出来的问题:
如果你单纯解决微信图片防盗链的问题,那上面这篇文章的解决方案就可以搞定。
但是!! 如果你的项目里除了前端显示的图片是从微信服务器返回的以外,恰好项目里又有公众号第三方授权功能的,就比较尴尬了。
那,什么是 第三方平台公众号授权 ?
就是公众号管理员把自己的公众号授权给第三方平台,授权后,第三方平台可以代替公众号,执行相应的权限,比如说获取公众号的相关信息
微信图片链接,这样的:
http://mmbiz.qpic.cn/mmbiz_png/xxxxxxxxxxxxxxxxxxxxxxxxxxx/0
或者
http://mmbiz.qpic.cn/mmbiz_jpg/xxxxxxxxxxxxxxxxxxxxxxxxxxx/0
第三方平台公众号授权 正常访问时页面长这样:(官方文档里拿的图)
那你在项目入口页 src/index.html
里设置的 <meta name="referrer" content="same-origin" />
会让你跳第三方平台公众号授权
页面时,报错:
当然了 ,你页面里的微信图片还是正常显示的,但是导致第三方平台公众号授权页面报错就意料之外了。
解决方案:
1、去掉你在项目入口页 src/index.html
里设置的 <meta name="referrer" content="same-origin" />
2、设置 nginx ,把微信图片反向代理到你的页面域名
server {
listen 80;
server_name xxx.xxxx.cn; # 放你的页面域名
# 微信图片url域名后面就是/mmbiz_png/这一截是固定的,就监听它不同图片后缀的 ~ /mmbiz_(.*)/
location ~ /mmbiz_(.*)/ {
proxy_set_header Referer '';
proxy_set_header X-Scheme $scheme;
proxy_set_header Host 'mmbiz.qpic.cn'; # 找运维配测试环境服务器nginx:设置host为微信图片url的域名
proxy_pass http://mmbiz.qpic.cn; # 找运维配测试环境服务器nginx:代理到微信图片url的域名
# 这两行用于你本地测试,上面那两行是测试/生产环境要设置的。用哪个把另一个注释掉重启nginx就行。
#proxy_set_header Host 'xxx.xxxx.cn'; # 你本地:设置host为你页面的域名
#proxy_pass http://192.168.11.11:8080; # 后端本地ip+端口 or 测试环境ip+端口
}
# location后面是监听后端接口目录名,比如你接口地址是这个:http://xxx.xxxx.cn/user-manage-web/getUserList ,那就写成 location /user-manage-web {# proxy_pass ...}
location /interface-folder-name {
proxy_pass http://192.168.11.11:8080; # 后端本地ip+端口 or 测试环境ip+端口 ,这里乱写一个。
}
# 监听前端服务ip+端口 http://127.0.0.1:3000 这就是你本地webpack服务设置的端口
location / {
proxy_pass http://127.0.0.1:3000;
}
}
别忘了配置你系统的hosts文件, 一般在这儿 C:\Windows\System32\drivers\etc
# 把你的页面域名指向到127.0.0.1 你本地 ,这样访问这个域名,配合nginx就能本地调试。
127.0.0.1 xxx.xxxx.cn
3、项目里把所有微信图片url的域名换成你页面的域名,
用 js wxImgUrl.replace(/mmbiz.qpic.cn/,window.location.host)
比如:
http://mmbiz.qpic.cn/mmbiz_png/xxxxxxxxxxxxxxxxxxxxxxxxxxx/0
换成
http://xxx.xxxx.cn/mmbiz_png/xxxxxxxxxxxxxxxxxxxxxxxxxxx/0
over.