本地开发环境 中处理微信文章中图片防盗链的问题

Reference

1. 微信文章图片防盗链处理方法

   一种是下载到本地，在通过本地文件访问，二是模拟请求

2. 解决微信公众号文章的防盗链

   在html的head中加

   <meta name="referrer" content="never">
   

   会导致后端无法写入cookie，从而获取不到kmsid 的信息，导致无权限

3. 前端黑科技-如何使用防盗链图片

   通过iframe 来实现的

   具体原理：
   防盗链图片，是被服务器判断了header中的referer的，但是如果referer=null，那就可以拿到图片了

   感觉可以通过webServer 改写 http://mmbiz.qpic.cn/ 下的请求的referer 来实现

4. 处理微信文章中防盗链问题

   没试过，把链接添加到另一个链接的参数后面，感觉是转发下

5. http-proxy-middleware插件解决开发中跨域、鉴权、图片防盗链问题

   里面讲到的图片防盗链问题，正式我要解决的问题，没看明白通过ajax.get 方式请求图片的处理逻辑

解决办法

通过js处理要显示图片的url，如果是微信文字图片，在http://mmbiz.qpic.cn/ 下的图片，替换成本地开发环境的域名 http://localhost:8000/wxi 。加的 wxi 在本地的devServer 做代理转发，设置header中的referer为空，devServer 配置代码：

 devServer: {
    // development server port 8000
    port: 8000,
    proxy: {
      '/wxi': {
        target: 'https://mmbiz.qpic.cn',
        pathRewrite: { '^/wxi': '/' },
        changeOrigin: true,
        headers: {
          referer: ''  // 设置header中的referer为空
        }
      }
    }
  },