Azure静态网站JS无法加载travel-blogs目录下HTML文件列表求助

问题根源 #

• 本地直接打开HTML用的是file://协议，浏览器安全规则限制该协议下通过XMLHttpRequest访问目录，直接触发CORS报错。
• 安装Live Server后仍失效，大概率是路径配置错误、服务器未开启目录浏览功能，或是没考虑到静态网站本身无法动态遍历目录的限制。

一步步修复方案 #

1. 修正请求路径 #

检查bloglist.js里的请求路径：

• 假设你的文件结构是根目录下有all-travel-blogs.html，同级目录是travel-blogs文件夹，那脚本里的路径要写相对路径./travel-blogs/，绝对不能写本地硬编码的file:///C:/...这类路径。

2. 开启Live Server的目录浏览功能 #

默认Live Server不允许目录遍历，需修改配置：

• VS Code中按Ctrl+,打开设置，搜索Live Server: Directory Listing，勾选开启该选项。
• 重启Live Server，先访问http://localhost:5500/travel-blogs/，确认能看到文件夹内的博客文件，再刷新all-travel-blogs.html页面测试。

3. 适配Azure静态托管（核心关键） #

Azure静态网站属于纯静态托管，不支持动态遍历目录（没有后端服务处理目录扫描请求），所以即使本地解决问题，部署后仍会失效，需提前生成静态博客清单：

• 手动创建blog-list.json文件放在网站根目录，内容示例：

  [
    {"title": "第一次欧洲游全记录", "url": "./travel-blogs/europe.html"},
    {"title": "东南亚海岛避坑指南", "url": "./travel-blogs/se-asia.html"}
  ]
  

• 修改bloglist.js，将请求目录改为请求这个JSON文件：

  fetch('./blog-list.json')
    .then(res => res.json())
    .then(blogs => {
      const listBox = document.getElementById('blog-list');
      blogs.forEach(blog => {
        const item = document.createElement('li');
        const link = document.createElement('a');
        link.href = blog.url;
        link.textContent = blog.title;
        item.appendChild(link);
        listBox.appendChild(item);
      });
    })
    .catch(err => console.log('加载博客列表失败:', err));
  

• 后续新增博客时，手动更新blog-list.json即可，部署到Azure后就能正常加载列表。

4. 本地测试验证 #

• 用Live Server打开页面，打开开发者工具的Network标签，检查blog-list.json的请求状态是否为200，确认脚本能正确解析并渲染博客列表。

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