小程序入坑指南

使用小程序时，请求数据后，数据中有文字和图片，文字能够正常显示，但是图片显示不出来，并报出以下错误：

VM830:2 Failed to load media http://183.66.103.20/variety.tc.qq.com/A-M0wU3rbL1aRH2-rVUbX7YEOpajFgWZmUqfTQGqy4zY/x0200kl15t4.p201.1.mp4?vkey=0C382556E38D9C72E428E25D28C50B3A31303C0F65996697DB91C9C25BF2BFD17D594D9642183DFBFFF94320F5064AC0A31E911C66E51AE9D54F761DC089833C6681F70DFB544A8C9116938BFFA9D4BD060D2D2693A6EF3A403565A132CF56911BA9C2707567754AE15F18F12293AFA43BAD1471D573AE62&platform=10201&sdtfrom=&fmt=shd&level=0&locid=27444f67-381d-41fb-bac1-574212453519&size=2534631&ocid=203035820
the server responded with a status of 403 (HTTP/1.1 403 Forbidden) 
From server 183.66.103.20

原因：

图片服务器需要对小程序的refer放开限制。
小程序默认refer是：https://servicewechat.com/{appid}/

解决办法：

打开服务器并进行以下设置：

目录地址：/usr/local/nginx/conf/vhost/...

 location ~ .*\.(wma|wmv|asf|mp3|mmf|zip|rar|jpg|gif|png|swf|flv|mp4)$ {
    valid_referers none blocked servicewechat.com;
    if ($invalid_referer) {
        return 403;
    }
  }

将servicewechat.com添加到valid_referers列表。

注

笔者使用的是LNMP环境，所以以上设置正针对于Nginx用户，Apache用户请参考这篇文章