WebView自定义header loadUrl/additionalHttpHeaders

业务场景

用户在登录后获取了token值并保存在本地，应用内WebView加载网页时，前端处理token先读取header的该字段，再存到LocalStrorage里，也就是要求客户端在loadUrl的时候，要把token先放到header里，传递给web做登录校验。

通过查看API可用loadUrl(String url, Map<String, String> additionalHttpHeaders)

    private void load(String url) {
        Map<String, String> extraHeaders = new HashMap<>();
        extraHeaders.put("Authorization",  "user-token-here");
//        extraHeaders.put("authorization", "user-token-here");
        extraHeaders.put("diy", "diy");
        webView.loadUrl(url, extraHeaders);
    }

实际测试时，该方案并不生效，无论authorization大小写均不生效。

和前端联调的结果显示我们没有传这个值，甚至自定义的值都没有写进去。

最终反应出来的效果是没有认证，也就无法进行数据渲染。

但使用Charles抓包显示，在load网页的时候确实在header里有token字段，包括diy字段。

排查读写权限

最初的以为是没有LocalStroage的读写权限，随即打开webview的存储开关：
https://yq.aliyun.com/ziliao/150552

 WebSettings setting = webView.getSettings();
 setting.setJavaScriptEnabled(true);
 setting.setDomStorageEnabled(true);

 setting.setAppCacheMaxSize(1024 * 1024 * 8);
 String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
 setting.setAppCachePath(appCachePath);
 setting.setAllowFileAccess(true);
 setting.setAppCacheEnabled(true);

测试结果，仍然不行。

直接渲染方案

查看stackoverflow碰到了差不多的情况
https://stackoverflow.com/questions/7610790/add-custom-headers-to-webview-resource-requests-android

其中有给到解决方案，就是在WebViewClient()的回调方法shouldInterceptRequest里自行处理所有的web渲染

@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        try {
            DefaultHttpClient client = new DefaultHttpClient();
            HttpGet httpGet = new HttpGet(url);
            httpGet.setHeader("Authorization", "user-token-here");
            HttpResponse httpReponse = client.execute(httpGet);

            Header contentType = httpReponse.getEntity().getContentType();
            Header encoding = httpReponse.getEntity().getContentEncoding();
            InputStream responseInputStream = httpReponse.getEntity().getContent();

            String contentTypeValue = null;
            String encodingValue = null;
            if (contentType != null) {
                   contentTypeValue = contentType.getValue();
                 }
             if (encoding != null) {
                    encodingValue = encoding.getValue();
                }
               return new WebResourceResponse(contentTypeValue, encodingValue, responseInputStream);
           } catch (ClientProtocolException e) {
             //return null to tell WebView we failed to fetch it WebView should try again.
            return null;
        } catch (IOException e) {
                    //return null to tell WebView we failed to fetch it WebView should try again.
              return null;
              }
    }

测试结果，该方案能正常渲染，但是问题又来了，在里面点击跳转（非跨域访问），无法正常渲染下一界面。

裁弯取直

按照前端同事的说法，他们也是读取header里的值，把token取出来放到LocalStorage里，之后就去拿LocalStorage的值，直接setHeader的方案不行，那么我们就直接帮他们放到存储里。

这里采用java调用js方案
https://www.v2ex.com/t/377333

js注入的时机有很多，比如以下

onPageFinished ：整个页面 load 完，明显不符合业务需求
onPageStarted ：页面加载前，无法注入（客户端尝试了确实不行）
onReceivedTitle ：webvieview 获得 ttile 说明可以往 head 注入 js
onLoadResource：每次加载资源就注入一次（可行，但是太麻烦，没必要）

最终是选择在onReceivedTitle 的回调里注入js

@Override
public void onReceivedTitle(WebView webView, String s) {
    super.onReceivedTitle(webView, s);
    String js = "localStorage.setItem('_token', '" + user-token + "')";
    webView.evaluateJavascript(js, null);
  }

测试通过，跳转也正常。

原因解析

目前怀疑是authorization不让被复写，具体原因未来得及验证。

最后编辑于：2018.07.12 22:41:12