jQuery加载外部HTML失败求助：CORS策略拦截请求问题

核心原因 #

这是CORS跨域策略限制导致的。你直接通过file://协议打开本地HTML文件时，浏览器会把页面的源标记为null，而jQuery的.load()本质是发送XMLHttpRequest请求，浏览器禁止这种从null源发起的本地文件请求——CORS策略只支持http、https、chrome等协议，不认可file://协议。

解决方法 #

1. 用本地HTTP服务器运行项目（推荐） #

把文件放到HTTP服务器环境下，用http协议访问，就能绕过CORS限制：

• Python内置服务器：
  打开命令行，进入项目所在文件夹，根据Python版本执行命令：
  • Python3：python -m http.server 8000
  • Python2：python -m SimpleHTTPServer 8000
    然后在浏览器输入http://localhost:8000/你的主页面文件名.html，再测试.load()就能正常工作。
• Node.js的http-server：
  先全局安装：npm install -g http-server
  进入项目文件夹后执行http-server，按照控制台提示的地址（一般是http://localhost:8080）访问页面即可。

2. 修改浏览器安全设置（临时测试用，不推荐） #

通过修改浏览器启动参数关闭file://的CORS限制，但会降低安全性：

• Chrome：右键点击Chrome快捷方式→属性，在“目标”栏末尾加 --allow-file-access-from-files（注意前面有空格），重启Chrome后打开本地文件测试。
• Firefox：地址栏输入about:config，搜索security.fileuri.strict_origin_policy，把值改成false，重启浏览器测试。

代码本身没问题 #

你的代码逻辑是对的：

• 主页面容器：<div id="yourDiv"></div>
• jQuery加载代码：$('#yourDiv').load('header.html #readMe');
• header.html内容：<div><div id="readMe"><p>I'm some text</p></div></div>
  只要在HTTP服务器环境下运行，就能正常把#readMe里的内容加载到#yourDiv中。

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