我想写一个通用的页眉和页脚,将被加载到每一个html文件,我想,所以当我想修改任何一个,它将在所有的页面修改。
从我所做的研究中,我发现你可以通过jQuery做到这一点:
$(document).ready(function () {
$('header').load('header.html')
$('footer').load('footer.html')
})
而且成功了我一直在使用它构建我的页面,结合Live Server(VS Code扩展),一切都很棒,直到我通过从文件资源管理器打开它来测试它。不是这样的。它给了我以下错误:Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file: path/to/src/header.html. (Reason: CORS request not http).
我认为这与安全政策有关。是否有某种变通方法,或者我将不得不复制粘贴到每个文件的页眉和页脚,只是处理这种方式?为什么它通过Live Server工作,而当我静态打开它时却不工作。
我不得不提的是,即使我知道一些JS,这些是我的第一个jQuery代码行,我不知道它是如何工作的。
2条答案
按热度按时间fnvucqvd1#
要发出JavaScript请求,您需要向您所在的网站或另一个允许它的网站发出请求(通过Access-Control响应头),但是当您使用文件资源管理器打开时,不是服务器提供文件,浏览器只是从机器打开,因此没有响应头,浏览器无法验证(您可以在Chrome开发人员工具的网络选项卡中看到这一点)
但是当你打开Live Server时,它是一个普通的服务器:
**所以你很好,当你将应用程序部署到Web时,它将是一个服务器,它将工作。
tvz2xvvm2#
这是我在个人项目中使用的一种变通方法,因为我喜欢使用vim。
如果你的机器上安装了Python,你可以尝试以下操作:
打开Windows PowerShell。
cd到源文件所在的目录,然后运行
python -m http.server
这将导致类似于
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
的消息接下来,转到您的浏览器并将其插入为您的URL
localhost:port
...即:127.0.0.1:8000
如果您编辑文件,刷新页面时应使用新更改更新页面。如果页面没有更新,有时你必须清除缓存的图像和文件(对于谷歌
CTRL + SHIFT + DEL
将带你到你可以清除它们的地方)