带有相对路径的jQuery .load（） - XMLHttpRequest无法加载 - 解决方法？

Question

我有一个本地存储的项目，其目录结构如下（我最小化了非相关文件夹）：

我想要做的是在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无法加载file：/// C：/Users/GalGr/Desktop/eiomw/header.html。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。

我正试图克服它。

此代码适用于my live website - 它可能不会更新为我链接到下面的文件的代码，但无关紧要 - 它们的代码很重要。

这是index.html文件： index.html

这是header.html文件： header.html

这是`main_script.js： main_script

Answer 1

您在本地遇到此问题的原因主要在于浏览器中的安全措施。

基本上，无论何时使用jQuery的load()函数，它都会为您提供的文件或URL提供单独的HTTP请求（称为AJAX）。

现代浏览器强制您使用AJAX方法请求的URL来自与安全功能相同的来源（服务器），以阻止页面在后台从Internet上的任何位置随机加载内容。在您的情况下，这似乎不会影响您，因为您在本地浏览您的网页，而您使用load()进行的请求也适用于本地文件（header.html）。

但是，我假设您只是直接在浏览器中打开页面，因此您的浏览器的URL看起来像'file：/// C：/ Users ...'（错误消息中的类似示例）你给了）。这意味着您的浏览器直接从磁盘读取文件并将其解释为HTML以显示页面。您可能实际上没有托管该页面的本地HTTP服务器，否则URL将以“http：//”开头。正是由于这个原因，浏览器提供了安全性错误，即使您对header.html的AJAX请求在技术上来自与其执行的页面相同的源。

您的服务器将拥有一个用于托管页面的HTTP服务器，因此一切正常，因为您正常使用HTTP，并且此安全功能不会妨碍您。

我建议你只需在dev机器上本地安装HTTP服务器。您甚至不需要“安装”一个，只有大量的开发HTTP服务器可以独立运行，因此当您想要浏览本地HTML文件时，可以启动它们。当您看起来在Windows上时，我会检查IIS（Windows的HTTP服务器）或IIS Express（如IIS，但独立运行）。还有许多其他可用的，如Apache，Nginx等等。

如果您这样做，可以将您的网页托管在“http://localhost/index.html”之类的网页上。然后，您为本地文件发出的任何AJAX请求都可以正常工作，就像您的服务器一样。

希望这是有道理的，我不会告诉你一些你已经知道的事情？

Answer 2

为什么不使用像mustache.js这样更直接的前言？

Answer 3

我找到了解决方案：

使用phpStorm的内置localhost，我能够模拟处理我的请求和响应的服务器。