React Native 中使用 WebView 组件应对 WebView 跨域
背景介绍
在前端领域，跨域是一个经常出现的问题。当我们在 React Native 应用中使用 WebView 组件加载一个外部链接时，如果该链接的源跟我们的应用不在同一个域名下，那么就会遇到 WebView 跨域的问题。
问题原因
大部分网站为了保障网站本身的安全，会限制跨域访问。浏览器的 Same Origin Policy 规定，来自A网站的脚本只能访问A网站的属性，而不能访问B网站的属性。同源策略只是一种安全机制，它不会禁止 JS 文件或者 CSS 文件进行跨域的访问。但是浏览器使用的技术栈有所不同，如果两个不同源的 WebView 组件需要进行相互通讯，由于 WebView 技术栈的不同，也会遇到同样的跨域问题。
解决方案
我们可以使用 React Native 提供的 WebView 组件自带的一个属性来解决 WebView 跨域问题。在 WebView 的 source 属性中加入 {originWhitelist: ['*']} 就可以解决 WebView 的跨域问题了。
-------- --------- ---- ------------------------- -- ----------------------- --
在上述代码中，访问的链接为 https://www.example.com，而我们使用 originWhitelist 将 WebView 组件的源域名设置为通配符 *，这样就可以解决 WebView 跨域问题了。
深度解析
如果一个网站需要在 WebView 中跨域访问来自不同域名的资源，例如某些需要使用第三方接口的网站，我们可以将 WebView 的 source 属性设置为如下地址格式：
--------
---------
---- -------------------------------------------------------------------
-------- -
------------------- -----------------
--------- ---
--
--
-----------------------
--在上述代码中，我们需要将 source 属性的地址设置为 https://cors-anywhere.herokuapp.com/${'https://www.example.com'} 的形式。cors-anywhere 是一个开源的代理服务，会将请求进行处理，以实现跨域访问。其地址格式为：
------------------------------------------------------
需要注意的是，在使用 cors-anywhere 的情况下，需要通过指定HTTP请求头来告诉服务器请求的来源。常用的 Origin 头表示请求的来源地址。因此，需要在 source 属性中设置请求头信息 headers，其中 Origin 头要置空，因为 cors-anywhere 不允许 Origin 头为空，这里我们可以简单地将值设置为空字符串。
最佳实践
当我们遇到 WebView 跨域问题时，建议优先使用 originWhitelist 的方案解决问题。如果在某些较特殊的场景下无法解决，再考虑使用 cors-anywhere 的方式。但是使用 cors-anywhere 的方案需要谨慎使用，因为代理服务器会增加额外的响应时间，对用户体验会有一定的影响。
结论
React Native 中使用 WebView 组件时，应对 WebView 跨域问题，我们可以优先使用 originWhitelist 提供的方案。如果在某些场景下无法解决问题，再考虑使用 cors-anywhere 的方式。当使用 cors-anywhere 时，需要注意请求头中的 Origin 头需置为空字符串。
示例代码
------ ----- ---- --------
------ - ------- - ---- ---------------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
--------
---------
---- -------------------------------------------------------------------
-------- -
------------------- -----------------
--------- ---
--
--
-----------------------
--
--
-
-来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67340bac0bc820c582461361