在移动应用中，我们经常使用WebView来显示HTML内容。但是由于WebView的安全性设计，它不允许JavaScript从一个非同源（cross-domain）的网站上获取数据。这种限制是为了防止跨站点脚本攻击（Cross-Site Scripting，XSS）。但是，有些时候我们需要从不同的源获取数据，比如从本地HTML文件中获取数据。那么该怎样实现呢？
同源策略和跨域请求
首先，我们需要了解一下“同源策略”（Same-Origin Policy）这个概念。同源指的是协议、域名、端口号都相同。浏览器遵循同源策略，即只有在同一源下的页面之间才能相互访问，跨源则会受到限制。
通常，我们可以通过跨域请求（Cross-Origin Request）来实现从不同的源获取数据。跨域请求包括三种类型：CORS（Cross-Origin Resource Sharing）、JSONP（JSON with Padding）和代理服务（Proxy Service）。其中，CORS是目前最流行、最安全的一种跨域请求方式。
从本地HTML文件跨域请求的解决方案
对于从本地HTML文件中发起跨域请求的问题，我们可以使用以下两种解决方案：
1. 使用CORS
我们可以在本地开启一个Web服务器，然后使用CORS方式进行跨域请求。具体实现步骤如下：
步骤一：安装并配置http-server
首先，我们需要安装 http-server，它是一个简单的零配置命令行HTTP服务器。使用npm进行安装：
npm install -g http-server
接着，在本地HTML文件所在目录下打开终端，输入以下命令运行http-server：
http-server
此时，我们就可以通过访问 http://localhost:8080/ 来访问该目录下的HTML文件了。
步骤二：设置Access-Control-Allow-Origin
在HTML文件中，我们需要添加以下代码来允许跨域请求：
<!-- 允许所有源的跨域请求 --> <meta http-equiv="Access-Control-Allow-Origin" content="*">
如果你只想允许特定的源访问，则将 * 替换为对应的源即可。
步骤三：发送跨域请求
在JavaScript代码中，我们可以使用XMLHttpRequest对象进行跨域请求：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();这样，我们就可以从本地HTML文件中成功发起跨域请求了。
2. 使用文件协议（file://）
另一种解决方案是使用文件协议（file://）进行访问。由于使用文件协议访问时不涉及到跨域问题，所以我们可以直接在本地HTML文件中使用JavaScript来获取本地文件数据。具体实现步骤如下：
步骤一：读取本地文件
通过File API，我们可以读取本地文件内容：
-- -------------------- ---- -------
--- --------- - -------------------------------------
------------------------------------ ----------- -
--- ---- - ------------------
--- ------ - --- -------------
------------- - ---------- -
---------------------------
--
------------------------
---步骤二：点击按钮触发读取事件
在HTML文件中，我们需要添加一个input元素和一个button元素，用于选择文件和触发读取
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31129