开发那点事(七) 原生webview传递header前端H5如何接收

开发背景
跟其他公司合作的一个项目,传递参数的方式为原生通过自定义header头参数,由前端来接收。
踩坑
1 原生传参
安卓原生传参的方式很简单,通过webview.loadUrl这个方法,如下:

   Map map = new HashMap();
   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则不行。

你可能感兴趣的:(开发那点事(七) 原生webview传递header前端H5如何接收)