Nginx环境下Ajax请求报404错误排查求助

核心问题：请求路径错误 #

你在Ajax代码里写的/home/pi/smart_home/ajax_info.txt是本地文件系统的绝对路径，但前端页面是通过Web服务器（比如Nginx、Apache或Python简易服务器）访问的，Web服务器只会识别自身根目录下的资源路径，不会直接读取本地文件系统的绝对路径，所以服务器找不到这个文件，返回404错误。

正确的修改方式 #

1. 调整文件位置
   把ajax_info.txt放到你的Web服务器的网站根目录下：

   • 比如用Apache/Nginx时，根目录通常是/var/www/html/；
   • 用Pythonpython -m http.server启动时，根目录就是你运行命令的当前文件夹。

2. 修正请求路径
   根据文件的实际位置修改Ajax的请求路径：

   • 如果文件和当前HTML页面在同一目录，用相对路径："ajax_info.txt"
   • 如果文件放在根目录下的smart_home子文件夹里，用服务器根路径："/smart_home/ajax_info.txt"

修正后的脚本示例 #

function loadDoc() {
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        document.getElementById("verbruik").innerHTML = this.responseText;
    }
    // 假设ajax_info.txt和当前HTML在同一目录
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send();
    setTimeout(loadDoc, 2000);
}
loadDoc();

额外检查点 #

• 确保Web服务器对ajax_info.txt文件有读取权限，否则可能返回403权限错误；
• 可以打开浏览器开发者工具（F12）的「网络」标签，查看具体请求的路径和错误详情，进一步确认问题。

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