当微信服务器的图片与公众号第三方授权功能在项目里同时存在时设置referrer报错的解决方案

继 【上传到微信服务器的图片在前端显示“此图片未经允许不可使用”】 这篇文章之后衍生出来的问题：

如果你单纯解决微信图片防盗链的问题，那上面这篇文章的解决方案就可以搞定。

但是！！ 如果你的项目里除了前端显示的图片是从微信服务器返回的以外，恰好项目里又有公众号第三方授权功能的，就比较尴尬了。

那，什么是 第三方平台公众号授权 ？

就是公众号管理员把自己的公众号授权给第三方平台，授权后，第三方平台可以代替公众号，执行相应的权限，比如说获取公众号的相关信息

微信图片链接，这样的：
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.