WiFi密码修改网站下拉菜单无法加载JSON数据问题求助

常见错误点及对应修复方法 #

1. 本地直接打开HTML的CORS限制 #

直接通过file://协议打开本地HTML文件时，浏览器的安全策略会阻止fetch请求本地JSON文件，这是下拉菜单无选项的最常见原因。

修复方式：

• 启动本地服务器运行项目，比如：
  • Python 3：在项目根目录执行命令 python -m http.server
  • Python 2：执行 python -m SimpleHTTPServer
  • Node.js：先全局安装http-server（npm install -g http-server），再在项目根目录执行http-server
• 之后通过http://localhost:端口号访问你的HTML页面。

2. JSON文件路径错误 #

fetch('data/data.json')使用的是相对路径，若HTML文件和data文件夹的层级关系不对，会导致请求失败。

排查与修复：

• 确认项目结构是否如下（以HTML在根目录为例）：

  项目根目录
  ├── index.html
  └── data
      └── data.json
  

• 若HTML在子文件夹（如html/index.html），需把路径改为../data/data.json。

3. JSON文件或服务器权限问题 #

• 检查data.json语法：确认JSON格式完全正确（你的示例内容是没问题的，但如果后续修改过要重新验证）。
• 检查文件权限：Linux/macOS环境下，确保服务器能读取该文件，可执行命令 chmod 644 data/data.json。

调试技巧 #

打开浏览器开发者工具（F12）：

• Console标签：查看fetch抛出的错误信息，比如CORS报错或404（文件未找到）。
• Network标签：查看data.json的请求状态，若状态码为404说明路径错误；状态码200则检查响应内容是否符合预期。

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