页面加载时如何读取加载本地文件，jQuery.load触发CORS错误怎么解决？

Access to XMLHttpRequest at 'file:////footerText.txt' from origin 'null' has been blocked by CORS policy 报错的根因是：直接通过file://协议打开本地HTML文件时，浏览器出于同源安全策略限制，禁止页面读取本地其他文件，哪怕目标文件和HTML在同一目录下也会被拦截。

方案一：启动本地临时HTTP服务（最推荐，无安全风险） #

只需要在项目目录下启动一个简易的本地HTTP服务，通过http://localhost域名访问页面，原有jQuery代码无需任何修改即可正常运行，不同环境的启动命令如下：

• 已安装Python3：
  打开命令行进入项目目录，执行python -m http.server 8000
• 已安装Python2：
  打开命令行进入项目目录，执行python -m SimpleHTTPServer 8000
• 已安装Node.js：
  全局安装http-server后执行http-server -p 8000
• 已安装PHP：
  打开命令行进入项目目录，执行php -S localhost:8000

服务启动后，在浏览器地址栏输入http://localhost:8000/你的HTML文件名.html访问即可，此时.load()方法可以正常读取同目录下的txt文件。

方案二：调整浏览器安全设置（仅适合本地临时测试） #

如果不想搭建服务，可通过修改浏览器启动参数放开本地文件访问限制，仅推荐测试时使用，不要用该模式访问公共网络，存在安全风险：

1. 找到Chrome浏览器的桌面快捷方式，右键选择「属性」
2. 在「目标」输入框的原有内容末尾，加一个空格后补充--allow-file-access-from-files
3. 关闭所有已打开的Chrome窗口，双击修改后的快捷方式启动浏览器，再打开本地HTML文件即可正常读取本地txt文件。

方案三：将文本内容封装为JS变量（无需服务，无安全风险） #

如果不想搭服务也不想改浏览器设置，可以把txt文件改为JS脚本，把文本内容存为全局变量，直接引入后填充即可：

1. 把headerText.txt重命名为headerText.js，内容修改为：

const headerText = `此处填写原来headerText.txt里的全部内容`

2. 同理修改mainText.txt、footerText.txt为对应的JS文件，内容定义为对应的全局变量
3. 在HTML的jQuery代码之前引入这三个JS文件：

<script src="headerText.js"></script>
<script src="mainText.js"></script>
<script src="footerText.js"></script>

4. 修改原有jQuery逻辑：

jQuery(document).ready(function ($) {
  $("div#headerText").text(headerText);
  $("div#mainText").text(mainText);
  $("div#footerText").text(footerText);
});

该方案直接通过file://协议打开HTML也不会触发CORS报错。

内容的提问来源于stack exchange，提问作者katch