PHP文件在对我的XMLHttpRequest的响应中返回502 bad gateaway错误

问：

我正在编写一个应用程序，用户可以通过单击按钮来创建便笺。他们还可以通过拖动来更改背景颜色和便笺的位置。最后，我希望每个操作（创建、更改颜色、添加文本、更改位置）都将数据保存在文本文件中，以便在应用程序打开时可以再次加载。顺便说一句，我使用 WAMP 作为我的服务器。

这是我的问题：

当我将数据发送到我的PHP文件（save-notes.php）时，它会向我的控制台返回502 bad gateaway错误，我不知道原因。当我还尝试通过 CMD 将数据发送到我的 PHP 文件时，json_decode 函数返回 null。

如果您能帮助我，我将不胜感激。

这是我的 Javascript 代码：

let notes = [];
let z = 1;
function createNote() {
    const note = document.createElement('div');
    note.classList.add('note');
    note.style.zIndex = z++;

    const colorInput = document.createElement('input');
    colorInput.type = 'color';
    colorInput.classList.add('color-buttons');
    colorInput.addEventListener('input', function () {
        note.style.backgroundColor = colorInput.value;
    });
    note.appendChild(colorInput);

    const deleteButton = document.createElement('button');
    deleteButton.innerText = 'Delete';
    deleteButton.addEventListener('click', function () {
        note.remove();
        notes = notes.filter(n => n !== note);
    });
    note.appendChild(deleteButton);

    const textarea = document.createElement('textarea');
    note.appendChild(textarea);


    document.getElementById('notes-container').appendChild(note);
    notes.push(note);
    saveNotes()
}


let active = false;
let currentNote = null;
let xOffset = 0;
let yOffset = 0;
function dragStart(e) {
    if (e.target.classList.contains('note')) {
        active = true;
        currentNote = e.target;

        xOffset = e.clientX - currentNote.getBoundingClientRect().left;
        yOffset = e.clientY - currentNote.getBoundingClientRect().top;

        currentNote.style.zIndex = z++;
    }
}

function drag(e) {
    if (active && currentNote !== null) {
        e.preventDefault();
        const x = e.clientX - xOffset;
        const y = e.clientY - yOffset;

        currentNote.style.left = x + 'px';
        currentNote.style.top = y + 'px';

        console.log(currentNote.style.left)
        console.log(currentNote.style.top)
    }
}

function dragEnd() {
    active = false;
    currentNote = null;
    saveNotes();
}

document.addEventListener('mousedown', dragStart);
document.addEventListener('mouseup', dragEnd);
document.addEventListener('mousemove', drag);

function saveNotes() {
    const data = JSON.stringify(notes.map(note => ({
        "text": note.querySelector('textarea').value,
        "left": note.style.left,
        "top": note.style.top
    })));


    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'save-notes.php');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(data)
}

这是我的php代码：

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

   $rawData = file_get_contents("php://input");
   $data = json_decode($rawData, true);

    if (!file_exists("notes.txt")) {
        touch("notes.txt");
    }

    file_put_contents("notes.txt", json_encode($data));
    exit;
}

当我将数据发送到我的PHP文件（save-notes.php）时，它会向我的控制台返回502 bad gateaway错误，我不知道原因。当我还尝试通过 CMD 将数据发送到我的 PHP 文件时，json_decode 函数返回 null。