jQuery 具有相对路径的 .load() - 无法加载 XMLHttpRequest - 解决方法？
jQuery .load() with Relative Path - XMLHttpRequest Cannot Load - Workaround?
我有一个本地存储的项目，其目录结构如下（我最小化了不相关的文件夹）：
我想要做的是在一个 HTML 文件中，比如 index.html，添加一个 <header>，这样它的内容将从外部 HTML 文件，所以我必须在 index.html 中写的所有内容都是 <header>，我的解决方案会自动加载内容。
为此，我想使用 JavaScript（最好是 jQuery，但如果其他解决方案有效而 jQuery 无效，或者如果他们的工作和执行速度比 jQuery).
我认为我不应该使用 <iframe>，因为它可能比使用 jQuery/JavaScript 增加更多的加载时间（就像我说的那样，这是有效的现在，当网站上线时)。
现在，我正在使用 jQuery .load() 函数。我不太了解 jQuery，但有人告诉我它应该在本地工作——但对我来说却不行。
我的浏览器控制台显示了问题：
jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/GalGr/Desktop/eiomw/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
我正在努力克服它。
此代码适用于 my live website - 它 可能 不会更新为我在下面链接到的文件的代码，但这并不重要 - 他们的代码很重要。
这是 index.html 文件：
index.html
这是 header.html 文件：
header.html
这是`main_script.js：
main_script
您在本地遇到此问题的原因主要是浏览器中的安全措施。
基本上，每当您使用 jQuery 的 load() 函数时，它都会为文件或 URL 您发出单独的 HTTP 请求（称为 AJAX 的方法）给。
现代浏览器强制要求您使用 AJAX 方法请求的 URL 来自同一来源（服务器）作为一项安全功能，以阻止页面在后台从互联网上的任何地方随机加载内容.在您的情况下，这似乎不会影响您，因为您正在本地浏览您的页面，并且您使用 load() 发出的请求也是针对本地文件 (header.html).
但是，我假设您只是直接在浏览器中打开页面，所以您浏览器的 URL 看起来像 'file:///C:/Users...'（您提供的错误消息中的类似示例） .这意味着您的浏览器直接从磁盘读取文件并将其解释为 HTML 以显示页面。您似乎实际上没有托管该页面的本地 HTTP 服务器，否则 URL 将以 'http://' 开头。正是出于这个原因，浏览器给出了安全错误，即使您对 header.html 的 AJAX 请求在技术上与执行页面的来源相同。
您的服务器将有一个用于托管页面的 HTTP 服务器，因此当您正常使用 HTTP 时一切正常，并且此安全功能不会妨碍您。
我建议您只需在您的开发机器上本地安装一个 HTTP 服务器。您甚至不需要 'install' 一个 per-se，有大量的开发 HTTP 服务器只是 运行 独立的，因此当您想要浏览本地 [=35] 时启动它们=] 文件。当您似乎在 Windows 上时，我会检查 IIS（Windows' HTTP 服务器）或 IIS Express（类似于 IIS，但 运行 是独立的）。还有许多其他可用的，如 Apache、Nginx 等
如果这样做，您可以将您的网页托管在“http://localhost/index.html”之类的网站上。然后，您对本地文件发出的任何 AJAX 请求都将正常工作，就像您的服务器一样。
希望这是有道理的，我不是在告诉你一些你已经知道的事情吗？
为什么不使用像 mustache.js 这样更直接的前言？
我找到了解决方案：
使用 phpStorm 的内置本地主机，我能够模拟处理我的请求和响应的服务器。
我有一个本地存储的项目，其目录结构如下（我最小化了不相关的文件夹）：
我想要做的是在一个 HTML 文件中，比如 index.html，添加一个 <header>，这样它的内容将从外部 HTML 文件，所以我必须在 index.html 中写的所有内容都是 <header>，我的解决方案会自动加载内容。
为此，我想使用 JavaScript（最好是 jQuery，但如果其他解决方案有效而 jQuery 无效，或者如果他们的工作和执行速度比 jQuery).
我认为我不应该使用 <iframe>，因为它可能比使用 jQuery/JavaScript 增加更多的加载时间（就像我说的那样，这是有效的现在，当网站上线时)。
现在，我正在使用 jQuery .load() 函数。我不太了解 jQuery，但有人告诉我它应该在本地工作——但对我来说却不行。
我的浏览器控制台显示了问题：
jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/GalGr/Desktop/eiomw/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
我正在努力克服它。
此代码适用于 my live website - 它 可能 不会更新为我在下面链接到的文件的代码，但这并不重要 - 他们的代码很重要。
这是 index.html 文件：
index.html
这是 header.html 文件：
header.html
这是`main_script.js： main_script
您在本地遇到此问题的原因主要是浏览器中的安全措施。
基本上，每当您使用 jQuery 的 load() 函数时，它都会为文件或 URL 您发出单独的 HTTP 请求（称为 AJAX 的方法）给。
现代浏览器强制要求您使用 AJAX 方法请求的 URL 来自同一来源（服务器）作为一项安全功能，以阻止页面在后台从互联网上的任何地方随机加载内容.在您的情况下，这似乎不会影响您，因为您正在本地浏览您的页面，并且您使用 load() 发出的请求也是针对本地文件 (header.html).
但是，我假设您只是直接在浏览器中打开页面，所以您浏览器的 URL 看起来像 'file:///C:/Users...'（您提供的错误消息中的类似示例） .这意味着您的浏览器直接从磁盘读取文件并将其解释为 HTML 以显示页面。您似乎实际上没有托管该页面的本地 HTTP 服务器，否则 URL 将以 'http://' 开头。正是出于这个原因，浏览器给出了安全错误，即使您对 header.html 的 AJAX 请求在技术上与执行页面的来源相同。
您的服务器将有一个用于托管页面的 HTTP 服务器，因此当您正常使用 HTTP 时一切正常，并且此安全功能不会妨碍您。
我建议您只需在您的开发机器上本地安装一个 HTTP 服务器。您甚至不需要 'install' 一个 per-se，有大量的开发 HTTP 服务器只是 运行 独立的，因此当您想要浏览本地 [=35] 时启动它们=] 文件。当您似乎在 Windows 上时，我会检查 IIS（Windows' HTTP 服务器）或 IIS Express（类似于 IIS，但 运行 是独立的）。还有许多其他可用的，如 Apache、Nginx 等
如果这样做，您可以将您的网页托管在“http://localhost/index.html”之类的网站上。然后，您对本地文件发出的任何 AJAX 请求都将正常工作，就像您的服务器一样。
希望这是有道理的，我不是在告诉你一些你已经知道的事情吗？
为什么不使用像 mustache.js 这样更直接的前言？
我找到了解决方案：
使用 phpStorm 的内置本地主机，我能够模拟处理我的请求和响应的服务器。