Flask后端对接Node.js前端时出现ReferenceError: document is not defined

AI 小北

2026-8-17

问题描述

我正在开发一个前端基于Node.js、后端基于Flask的程序。

前端代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  
    <title>PreFab Davao</title>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

后端接口代码

@DBretriever.route('/getProjectDetails/<project_id>', methods = ['GET'])
def get_Project_Details(project_id): #gets project details from project ID
    project_Details = []
    found_Project = projects_collection.find_one({"project_id": project_id})

    if found_Project == None:
        print("Error Code: e0102db; Project ID  Not Found")
        return "e0102db"
    else:
        found_id = projects_collection.find_one({"project_id": project_id}, {"project_id": 1, "_id" : 0})
        project_id = found_id['project_id']
        project_Details.append(project_id)
        
        found_name = projects_collection.find_one({"project_id": project_id}, {"project_name": 1, "_id" : 0})
        project_name = found_name['project_name']
        project_Details.append(project_name) 

        found_status = projects_collection.find_one({"project_id": project_id}, {"project_status": 1, "_id" : 0})
        project_status = found_status['project_status']
        project_Details.append(project_status) 

        found_tasks = projects_collection.find_one({"project_id": project_id}, {"tasks": 1, "_id" : 0})
        tasks = found_tasks['tasks']
        project_Details.append(tasks) 

        return project_Details

前端调用的JS文件代码

function getProjectDetails(){

    const script = document.createElement("script");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
script.type = 'text/javascript'

    $.ajax({
        url:"/getProjectDetails/<project_id",
        type: "GET",
        dataType: "json",
        success: function(data){
            console.log(data)
        }

    });
}

getProjectDetails();

调用getProjectDetails()时出现ReferenceError: document is not defined错误，请问问题出在哪？

问题解决

1. 核心错误原因

document是浏览器环境特有的对象，这个错误说明你的JS代码在Node.js环境中执行了，而非浏览器端——Node.js没有document，所以触发报错。

修复步骤：

确保JS文件在浏览器环境加载执行：比如在React组件中通过useEffect钩子在组件挂载后调用，或者将JS文件通过<script>标签引入到HTML的<body>末尾（确保DOM加载完成）。
删掉重复引入jQuery的代码：你已经在HTML里引入了jQuery 3.6.1，JS文件里再创建script标签引入3.6.0完全多余，直接移除这段代码：
```
const script = document.createElement("script");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
script.type = 'text/javascript'
```

2. 其他需要修正的问题

URL路径错误：url:"/getProjectDetails/<project_id"里的<project_id>是占位符，需要替换为实际的项目ID值，比如/getProjectDetails/123，否则请求会发送到错误地址。

后端返回格式不统一：当前后端查询失败时返回字符串"e0102db"，但成功时返回数组，前端指定dataType: "json"会解析失败。建议后端统一返回JSON格式，同时优化数据库查询（无需多次调用find_one）：

from flask import jsonify

@DBretriever.route('/getProjectDetails/<project_id>', methods = ['GET'])
def get_Project_Details(project_id):
    found_Project = projects_collection.find_one({"project_id": project_id})

    if not found_Project:
        print("Error Code: e0102db; Project ID  Not Found")
        return jsonify({"error": "e0102db", "message": "Project ID Not Found"}), 404
    else:
        project_details = {
            "project_id": found_Project["project_id"],
            "project_name": found_Project["project_name"],
            "project_status": found_Project["project_status"],
            "tasks": found_Project["tasks"]
        }
        return jsonify(project_details)

React环境建议：如果是Create React App项目，更推荐使用内置的fetch或axios发送请求，而非jQuery，更符合React开发习惯。示例：

async function getProjectDetails(projectId) {
  try {
    const response = await fetch(`/getProjectDetails/${projectId}`);
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || '请求失败');
    }
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error(error);
  }
}

// 在React组件中调用示例
// useEffect(() => {
//   getProjectDetails('实际项目ID');
// }, []);

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

Flask后端对接Node.js前端时出现ReferenceError: document is not defined

前端代码 #

后端接口代码 #

前端调用的JS文件代码 #

1. 核心错误原因 #

修复步骤： #