Apache+PHP环境下前端URL数据无法被服务器接收的问题排查

你遇到的核心问题是fetch请求的目标地址错误（.php不是合法的PHP文件名），导致服务器返回了当前HTML页面的内容；另外还有数据传递和服务器端处理的细节问题需要调整。以下是完整的修正方案：

1. 修正前端HTML/JavaScript代码 #

将fetch请求指向具体的PHP文件名（比如save-url.php），同时优化输入验证和数据传递格式：

<!DOCTYPE html>
<html>
    <body>
        <input type="url" id="link" placeholder="输入URL"><br>
        <button onclick="myFunction()">提交URL</button>

        <script>
            function myFunction() {
                const urlInput = document.getElementById("link");
                const url = urlInput.value.trim();
                
                // 前端验证输入有效性
                if (!url) {
                    alert("请输入有效的URL");
                    return;
                }

                // 发送请求到指定PHP文件
                fetch("save-url.php", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json; charset=utf-8"
                    },
                    // 将URL封装为对象，便于服务器解析
                    body: JSON.stringify({ url: url })
                })
                .then(response => {
                    if (!response.ok) throw new Error("请求失败");
                    return response.text();
                })
                .then(data => {
                    console.log("服务器响应:", data);
                    alert("URL提交成功");
                    urlInput.value = ""; // 清空输入框
                })
                .catch(error => {
                    console.error("请求错误:", error);
                    alert("提交失败，请稍后重试");
                });
            }
        </script>
    </body>
</html>

2. 编写对应的PHP文件（save-url.php） #

确保PHP文件能正确接收JSON数据、验证输入并写入服务器文件：

<?php
// 仅处理POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    echo "仅允许POST请求";
    exit;
}

// 读取JSON格式的请求体
$rawData = file_get_contents("php://input");
$data = json_decode($rawData, true); // 转为关联数组更易操作

// 验证数据是否存在且有效
if (!isset($data['url']) || empty(trim($data['url']))) {
    http_response_code(400);
    echo "请提供有效的URL";
    exit;
}

$url = trim($data['url']);
$savePath = "urls.txt"; // 存储URL的目标文件

// 以追加模式写入文件（加锁避免并发写入问题）
if (file_put_contents($savePath, $url . PHP_EOL, FILE_APPEND | LOCK_EX)) {
    echo "URL已成功保存";
} else {
    http_response_code(500);
    echo "保存失败，请检查文件写入权限";
}
?>

关键注意事项 #

• 文件权限：确保Apache服务器对urls.txt所在目录有写入权限，可通过命令chmod 666 urls.txt或调整目录权限解决。
• 路径匹配：确认save-url.php和HTML文件在同一目录下，或使用正确的相对/绝对路径。
• 输入安全：如果需要处理用户输入的URL，建议额外添加格式验证（比如使用filter_var($url, FILTER_VALIDATE_URL)），避免无效数据存入。

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