前端报错:快速解决Django接口404问题

前端代码:

python 复制代码
function processFile(filename) {
    fetch(`/process_file/${filename}/`, {
        method: "POST"
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === "success") {
            document.getElementById("uploadStatus").innerHTML += "<br>文档解析并写入数据库成功 ✔";
        } else {
            document.getElementById("uploadStatus").innerHTML += "<br>文档处理失败 ❌";
        }
    })
    .catch(err => {
        console.error(err);
        document.getElementById("uploadStatus").innerHTML += "<br>处理出错 ❌";
    });
}

文件确实已经上传成功了,但在 process_file 这一步报"处理出错"。

这说明:

  • upload_file → 正常

  • processFile(filename) → 已经调用

  • 但是 process_file 这个 Django 接口 没有被正确访问到 / 报错 / 路由不匹配


原因 1:你的 URL 路由不匹配(最常见)

你前端请求的是:

POST /process_file/test.pdf/

但你的 Django urls.py 里很可能写的是 没有结尾斜杠没有 filename 参数

你的 urls.py 必须是 ↓↓↓

path('process_file/<str:filename>/', views.process_file, name="process_file"),

如果你是写:

path('process_file/', ...)

path('process_file', ...)

path('process_file/<str:filename>', ...)(少了 /)

都会导致 404 → 前端显示"处理出错"

相关推荐
闲云一鹤18 小时前
nginx 快速入门教程 - 写给前端的你
前端·nginx·前端工程化
QCY18 小时前
「完全理解」1 分钟实现自己的 Coding Agent
前端·agent·claude
曲幽19 小时前
FastAPI压力测试实战:Locust模拟真实用户并发及优化建议
python·fastapi·web·locust·asyncio·test·uvicorn·workers
一拳不是超人19 小时前
Electron主窗口弹框被WebContentView遮挡?独立WebContentView弹框方案详解!
前端·javascript·electron
anyup19 小时前
🔥2026最推荐的跨平台方案:H5/小程序/App/鸿蒙,一套代码搞定
前端·uni-app·harmonyos
雮尘19 小时前
如何在非 Claude IDE (TARE、 Cursor、Antigravity 等)下使用 Agent Skills
前端·agent·ai编程
icebreaker20 小时前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker20 小时前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
wuhen_n20 小时前
代码生成:从AST到render函数
前端·javascript·vue.js
喝咖啡的女孩20 小时前
浏览器前端指南
前端