背景
在移动前端开发中，经常需要使用 WebView 加载本地的 HTML 文件来实现一些简单的页面功能或者展示数据。然而，在这个过程中，我们可能会遇到一些跨域问题，特别是在涉及到 Cookies 的情况下。
CORS（跨域资源共享）
CORS 是一种机制，允许 Web 应用服务器进行跨域访问控制，从而使网页能够安全地访问其他域名下的资源。通常情况下，当浏览器执行某个跨源请求时，会发送一个预检请求 OPTIONS，如果服务器返回指定的头部信息，则浏览器才会继续发送正式的请求。
问题：如何在 WebView 中使用 CORS？
对于加载远程资源（http/https）的 WebView，由于默认开启了跨域访问，因此不会受到 CORS 的限制。但是，WebView 加载本地文件时，则需要设置允许跨域访问。
解决方案：设置 WebSettings.setAllowFileAccessFromFileURLs(true) 和 setAllowUniversalAccessFromFileURLs(true)
----------------------------------------------------------- ----------------------------------------------------------------
问题：如何在 WebView 中支持带有 cookie 和 credentials 的跨域访问？
在 WebView 加载远程资源时，如果需要带上 cookie 和 credentials，只需要设置 WebSettings.setAllowFileAccessFromFileURLs(true) 和 setAllowUniversalAccessFromFileURLs(true) 是不够的。我们还需要在服务器端设置 Access-Control-Allow-Origin、Access-Control-Allow-Credentials、Access-Control-Allow-Headers 等 headers 信息。
但是，当 WebView 加载本地 HTML 文件时，则不存在这样的服务器设置，如何解决呢？
解决方案：使用 addJavascriptInterface 方法和 JavaScript 做中转
步骤如下：
- 在 WebView 中实现一个 JavaScript 接口，用于从 WebView 向 JavaScript 发送消息，并从 JavaScript 接收返回值。
----- -------- -
--------------------
------ ---- ------------------ -------- -
-- - ---------- --- ------- ------------
-
--------------------
------ ------ ---------------- -
-- ---------------- ----------
------ ------- --------
-
-- 在加载 HTML 文件前，需要启用 JavaScript 和允许 JavaScript 访问 Java 对象。
------------------------------------------------- ---------------------------------- ----------- ------------
- 在 HTML 文件中编写 JavaScript 代码，调用上述接口。
-- - ---- ---- ----------------------------------- -------- -- - ---- ---- --- ------ - ---------------------------------
- 在 JavaScript 中，可以通过 Ajax 或 fetch 等方式向服务器发送请求，从而实现跨域访问。
-------------------------------- -
------- ------
------------ ---------- -- -- ------ - -----------
-------------------------- -
------ ----------------
---------------------- -
------------------
---总结
在移动前端开发中，我们经常需要使用 WebView 加载本地 HTML 文件。当需要进行跨域访问时，我们可以通过设置 WebSettings.setAllowFileAccessFromFileURLs(true) 和 setAllowUniversalAccessFromFileURLs(true) 来解决。但是，如果涉及到带有 cookie 和 credentials 的跨域访问，我们则需要通过 addJavascriptInterface 方法和 JavaScript 做中转来实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30254