使用getJSON读取本地JSON文件时遇404错误，如何解决？

先修正路径/文件名不一致问题 #

错误提示请求的是http://127.0.0.1/data/history.json，但你代码里写的是application/data/file.json，首先要统一：

• 确保代码中getJSON的文件名和实际本地文件的文件名完全一致（要么都叫file.json，要么都叫history.json）。

调整getJSON的请求路径 #

方法1：使用服务器根绝对路径 #

把路径改成以斜杠开头的绝对路径，避免相对路径受当前页面URL影响：

$.getJSON("/application/data/file.json", function(data) {      
    $.each(data, function(key, value) { 
        $("<div />", { "class":"group" })
        .append($("<p />", {name:"title"+i, id:"title"+i, text: key }))
        .appendTo(".output");
        $("<div />", { "class":"group" })
        .append($("<p />", {id:"content"+i, text: value }))
        .appendTo(".output");
        i++;
    })   
});

直接在浏览器地址栏输入http://127.0.0.1/application/data/file.json，如果能正常显示JSON内容，说明路径正确。

方法2：利用已有的host_api_url拼接路径 #

如果host_api_url是你的服务器根地址（比如http://127.0.0.1），直接拼接成完整URL，避免路径歧义：

$.getJSON(host_api_url + "/application/data/file.json", function(data) {      
    $.each(data, function(key, value) { 
        $("<div />", { "class":"group" })
        .append($("<p />", {name:"title"+i, id:"title"+i, text: key }))
        .appendTo(".output");
        $("<div />", { "class":"group" })
        .append($("<p />", {id:"content"+i, text: value }))
        .appendTo(".output");
        i++;
    })   
});

检查Web服务器的静态文件配置 #

从模板语法{% block %}来看，你大概率在用Flask这类Web框架，默认只允许访问特定目录的静态文件：

• 最简单的方式：把JSON文件移到框架默认的静态目录（比如Flask的static目录），放在static/data/file.json，然后请求路径改成"/static/data/file.json"。
• 或者修改服务器配置，将application/data设为静态可访问目录（以Flask为例）：

from flask import Flask
app = Flask(__name__, static_folder='application/data', static_url_path='/data')

这样访问/data/file.json就能对应本地的application/data/file.json，JS里的路径就可以写成"/data/file.json"。

验证路径有效性 #

不管用哪种方法，先在浏览器直接访问对应的URL，确认能加载到JSON内容，再在JS里使用该路径，就能避免404错误。

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