JavaScript Fetch API调用失败求助：NetworkError错误排查

核心问题分析 #

你遇到的NetworkError通常由请求配置错误、服务器端代码异常或页面上下文干扰导致，结合空白HTML能正常运行的情况，重点排查以下几点：

1. 修正Fetch请求配置 #

你的Fetch存在两处细节错误：

• 同域请求无需设置mode: "cors"，该模式用于跨域场景，同域下使用反而可能触发浏览器安全限制，直接移除该配置（默认same-origin模式即可）。
• Content-Type末尾多了个分号，正确写法是"application/json"，错误的MIME类型会导致服务器无法正确解析请求体。

修改后的JS代码：

function getFormData() {
    let user = {
        "username": "X_X",
        "password": "123"
    };

    fetch("index.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(user)
    })
    .then(response => {
        // 新增HTTP状态检查，便于定位错误
        if (!response.ok) {
            throw new Error(`请求失败，状态码: ${response.status}`);
        }
        return response.text();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('请求异常:', error);
    });
}

2. 修复PHP代码逻辑错误 #

你的PHP代码存在对象访问方式错误：

• json_decode($data)默认返回对象，而非数组，所以不能用$user["username"]访问属性，需改用$user->username；如果需要数组格式，可改为json_decode($data, true)。
• 额外增加数据有效性判断，避免空数据导致报错。

修改后的PHP代码：

<?php
session_start();
// 注意：session_start()之前不能有任何输出（包括空格、换行），否则会触发头信息错误

$data = file_get_contents("php://input");
$user = json_decode($data);

// 验证数据有效性
if ($user && isset($user->username)) {
    echo $user->username;
} else {
    echo "无效的请求数据";
}
?>

3. 排查页面上下文干扰 #

既然空白HTML能正常运行，说明Home.html可能存在其他干扰因素：

• 检查页面内是否有其他脚本（如广告、统计脚本）拦截了Fetch请求，可临时移除其他脚本测试。
• 尝试用浏览器隐身模式打开页面，排除浏览器扩展（如广告拦截器）的干扰。
• 打开浏览器开发者工具的「Network」标签，查看请求的详细信息：
  • 确认请求的URL是否正确（是否指向同目录的index.php）。
  • 查看响应状态码（如404、500），以及响应内容是否包含PHP错误信息。

4. 服务器端日志排查 #

如果以上步骤仍未解决，查看服务器的PHP错误日志，里面会记录代码执行时的具体错误（如语法错误、未定义变量等），这是定位服务器端问题的关键。

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