如何在Python Flask环境中使用JavaScript读取JSON文件

1 前端fetch调用失败的原因&修复 #

你之前的fetch写法路径错误：Flask的静态资源默认会挂载到/static/路由前缀下，你写相对路径test.json时，浏览器会以当前页面的URL为基准发起请求，而非相对于static目录，自然找不到文件。

正确写法： #

直接补全静态资源前缀即可，同时添加错误捕获方便排查问题：

fetch("/static/test.json")
  .then(response => {
    if (!response.ok) throw new Error("请求失败：" + response.status);
    return response.json();
  })
  .then(json => console.log(json))
  .catch(err => console.error("报错信息：", err));

如果你的JS代码写在Flask模板文件中，更稳妥的写法是用Flask自带的url_for生成路径，避免后续修改静态路由配置后路径失效：

fetch("{{ url_for('static', filename='test.json') }}")
  .then(response => response.json())
  .then(json => console.log(json));

2 Python读文件提示找不到的原因&修复 #

你之前的写法有两个问题：

• 相对路径错误：直接写file.json会从Flask启动时的工作目录查找文件，而非static目录
• 读取逻辑错误：你直接打印了文件对象，没有读取内容，也没有做JSON解析

正确写法（后端读取后传递给前端）： #

如果不想用前端fetch的方式，可以在后端读取JSON后传递到模板，直接赋值给JS变量：

第一步：视图函数中读取JSON

import json
import os
from flask import render_template

@app.route('/')
def index():
    # 拼接static目录下的JSON文件绝对路径，避免路径错误
    json_path = os.path.join(app.static_folder, 'file.json')
    with open(json_path, 'r', encoding='utf-8') as f:
        json_data = json.load(f)
    return render_template('index.html', json_data=json_data)

第二步：模板中直接赋值给JS变量

<script>
const jsonData = {{ json_data|tojson }};
console.log(jsonData);
</script>

通用排查点 #

• 确认JSON文件名拼写、大小写完全匹配（Linux服务器对大小写敏感）
• 可以直接在浏览器地址栏输入http://你的服务地址/static/test.json，确认可以正常访问到JSON内容
• 后端路径存疑时可以打印os.getcwd()查看当前工作目录，核对文件路径是否正确

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