Android 的 WebView 通过 file:// 协议加载本地的 HTML5 模板文件。本地文件的 JS 向远端发送 AJAX 请求，受到同源策略的限制，譬如你可能会看到“XMLHttpRequest cannot load file://…… Origin null is not allowed by Access-Control-Allow-Origin.”的错误提示，即当你的 URI 是 file:// 时，源域名（origin）为空。

借用 difcareer 的评论：Web 应用程序能且只能使用 XMLHttpRequest 对象向其加载的源域名发起请求，而不能向任何其他域名发起请求，但 HTML5 允许 AJAX 跨域向其他域名发起请求，但是不能获取服务器端响应。

iOS 下无此跨域问题。

 

对此，大致有四种应对措施：

如果是 GET 请求：

可以通过 JSONP 来解决跨域问题；

如果是 POST 请求：

由 App 原生代码发起网络操作，成功后回调 JS。

利用 HTML5 的“Cross-Origin Resource Sharing（CORS，跨域资源共享）”新特性，在服务器端响应头里设置：Access-Control-Allow-Origin 头域；

设置 Android 的 WebView 如下 settings 参数为 True：

if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.JELLY_BEAN){

    webView.getSettings().setAllowUniversalAccessFromFileURLs(true);

}

由此允许通过 file url 加载的 Javascript 可以访问其他的源，包括其他的文件和 http/https 等源。这个设置在 JELLY_BEAN 以前的版本默认是允许，在 JELLY_BEAN 及以后的版本中默认是禁止的。

According to the documentation for setAllowFileAccessFromFileURLs and setAllowUniversalAccessFromFileURLs, they used to be set to true for ICS and older. Starting in JellyBean they turned it off. If you are trying to load a local JS file from a local HTML page, then you'll need to enable these. – Steven

 

我们是既会在 Native API 里封装了一个接口 sendpostmsg，让 JS 调用（但也因此导致『除了 POST 请求，其他都可以在 PC 浏览器调试』），也会使用 setAllowUniversalAccessFromFileURLs 方法。

 

0x03，pushState 调用失败也属于跨域问题

我们需要使用 HTML5 的特性 history.pushState，手动插入历史记录和修改地址栏，这样虽然地址栏被修改了，但并不触发网页跳转。

同上节，本地文件的 JS 调用 history.pushState 也会遇到跨域问题，报错如下图所示：

原因仍是当你的 URI 是 file:// 时，源域名（origin）为空。

由于我们使用了 SUI，绕不开这个问题。所以，最终还是得调用 webView.getSettings().setAllowUniversalAccessFromFileURLs(true);

彻底解决各种跨域问题。

 

参考资源：

1，2014，300 毫秒点击延迟的来龙去脉；

2，2015，freebuf，鸢尾，同源策略详解及绕过（Part1）；

3，2015，知乎，纯数据 API 服务，设置 Access-Control-Allow-Origin: * 是否会有安全性隐患？

4，2012，csdn，CORS（跨域资源共享）简介；

5，2014，smdcn，使用HTML5 CORS特性进行Ajax跨域POST请求；

6，2011，sof，WebView Javascript cross domain from a local HTML file；

7，2014，龚广，WebView跨源攻击分析；

欢迎订阅我的微信订阅号『老兵笔记』，请扫描二维码关注：

转载时请注明“转载自旁观者-博客园”或者给出本文的原始链接。

-EOF-