開發那點事（七） 原生webview傳遞header前端H5如何接收

開發背景
跟其他公司合作的一個項目，傳遞參數的方式爲原生通過自定義header頭參數，由前端來接收。
踩坑
1 原生傳參
安卓原生傳參的方式很簡單，通過webview.loadUrl這個方法，如下:

   Map<String, String> map = new HashMap<String, String>();
   map.put("Payment-Token", "*****");
   myWebView.loadUrl(myEdit.getText().toString(), map);

2 H5接收參數
也很簡單，在網上查到的是ajax的方式，但是最後項目用的原生獲取header參數的，沒必要爲了接收個參數，在我大VUE框架裏引入jquery,如下:

 let req = new XMLHttpRequest();
      req.open('GET', document.location, false);
      req.send(null);
      let paymentToken = req.getResponseHeader('payment-token') ? req.getResponseHeader('payment-token') : '';
      this.paymentToken = paymentToken;
      if (paymentToken == '') {
        this.setShade('訂單信息獲取失敗');
      }

你看，多麼簡單。然後測試的時候就被啪啪打臉了。前端說沒收到參數，原生說傳了，互相僵持了一下午，最後用修改UserAgent的方式來傳遞參數的

myWebView.getSettings().setUserAgentString("****");

今天開會，覺得這種方式不行不正規，還是要用之前loadUrl的方式傳遞header參數，忽然公司的大佬一句話點醒了我，純前端VUE只能接收到response的header。

重點來了
請求一個網頁其中包括了一次request(請求)以及一次response(響應)。所以，我們常說的header頭也有兩個，一個是request的header頭，一個是response的header頭。問題點就在這，圈起來。原生那邊發的是request的header，而H5則接收的是response的header。
這個時候服務器的作用就來了，公司用的是nginx服務器，我在其中做了一些配置，邏輯就是獲取request中的header參數，然後動態設置到response的header中，打完收工，代碼如下

add_header 'Payment-Token' '$http_payment_token';

其中也可以看出，單純前端VUE項目與渲染頁面式前端項目(php，python)項目的區別，前者的權限沒有後者的權限那麼多，像php能直接通過Request->header的方式讀取request的參數，而VUE則不行。