本地開發環境中處理微信文章中圖片防盜鏈的問題

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爲空
        }
      }
    }
  },