此问题已在此处有答案：
"Cross origin requests are only supported for HTTP." error when loading a local file（30个回答）
16小时前关闭
截至13小时前，社区正在审查是否重新讨论这个问题。
我有一个静态网站，托管在Azure上（免费计划）。以下是我的网站结构：
**目标：**我希望网页all-travel-blogs.html显示所有的旅游博客存在的文件夹travel-blogs内的标题。为了实现这一点，我在bloglist.js文件中提供了以下javascript：
function getBlogList() {
var blogsFolder = './travel-blogs';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var blogList = document.getElementById('blogList');
var blogFiles = xhr.responseText.split('\n');
var blogHTML = '';
for (var i = 0; i < blogFiles.length; i++) {
if (blogFiles[i]) {
var blogTitle = getBlogTitle(blogFiles[i]);
var blogIntro = getBlogIntro(blogFiles[i]);
blogHTML += '<div><a href="' + blogsFolder + '/' + blogFiles[i] + '">' + blogTitle + '</a><p>' + blogIntro + '</p></div>';
}
}
blogList.innerHTML = blogHTML;
} else {
console.error('Failed to load blog files');
}
}
};
xhr.open('GET', blogsFolder, true);
xhr.send();
}
function displayBlogList() {
getBlogList();
}
function getBlogTitle(blogFile) {
// Extract the title from the file name
return blogFile.substring(0, blogFile.indexOf('.html'));
}
function getBlogIntro(blogFile) {
// Get the first <p> element from the blog file
var xhr = new XMLHttpRequest();
xhr.open('GET', './travel-blogs/' + blogFile, false);
xhr.send();
var blogHTML = xhr.responseText;
var parser = new DOMParser();
var doc = parser.parseFromString(blogHTML, 'text/html');
return doc.querySelector('p').innerHTML;
}HTML页面代码列出所有旅游博客：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Travel Blog List</title>
<script src="./bloglist.js"></script>
</head>
<body onload="displayBlogList()">
<h1>Travel Blog List</h1>
<div id="blogList"></div>
</body>
</html>问题：由于网页没有显示博客列表，我打开Inspect网页，发现出现以下错误：
CORS策略已阻止从源“null”访问位于“file：///C：/github-client/Website/Eterna-Bootstrap-Theme-based-website/blogs/blogs/travel-blogs”的XMLHttpRequest：跨域请求仅支持协议方案：http，data，isolated-app，chrome-extension，chrome，https，chrome-untrusted.
更新：
根据建议，我安装了Live Server扩展，以测试在本地服务器上运行网页。但它仍然不工作，如下面的屏幕截图所示：
2条答案
按热度按时间ttcibm8c1#
您提到的错误消息表明，由于缺少
Access-Control-Allow-Origin标头，浏览器正在阻止从本地文件系统访问Azure Static Web App加载的文件。这是因为CORS（跨源资源共享）规范，该规范防止浏览器在未经服务器许可的情况下访问来自其他来源的资源（例如不同的域或文件系统）。使用Azure，您可以设置全局标头，以确保我们的请求根据CORS规则发送到服务器。
示例：
我不确定您的Azure Web应用为何尝试使用
file://协议加载内容（请参阅：错误消息中的file://C:/github...）。对于任何网站来说，这都是一种不正确的方法，因为它只能在本地机器上工作。不幸的是，我还没有机会在Azure上测试这种行为。我的回答完全基于我的Web开发经验。7tofc5zh2#
尝试在div示例中插入您想要的数据：let my_data =“test”;document.getElementById（“div-id”）.innerHTML = my_data;