Angular/TypeScript客户端向服务器文本文件写入内容失败排查

通过Angular客户端发起POST请求，要求PHP服务端在https://objective.no/webapptest2/目录下创建h.txt并写入内容"456"。目前文件能成功创建，但始终没有写入内容，且无任何报错信息。

现有代码 #

服务端PHP代码 #

//PHP code:  (A little elaborate, but it should work)

//h.txt is created, but its content is never written: read only problem?? I can't find how to see if the file is read only or not)

//The php Code is located on Server

<?php
function getData() {
  $myFile = fopen("h.txt", "w");
  fclose($myFile);
  sleep(5);
  //return "link to h.txt";
}
getData();

// Tried to return different values for the URL below: 
// "h.txt" is created, but its content "456" is never written

return "URL to h.txt";
?>

客户端Angular代码 #

//On the Client side I have the following code:
//The Client is written in Angular, and the function that triggers the data exchange with server

testWriteToServerFile() {

        let data: string = "456";// this is your data that you want to pass to the server 
        //next you would initiate a XMLHTTPRequest as following (could be more advanced):

        var url = "url to the server side PHP code that will receive the data";

        var http = new XMLHttpRequest();
        http.open("POST", url, true);

        //Send the proper header information along with the request
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.setRequestHeader("Content-length", data.length.toString());
        http.setRequestHeader("Connection", "close");

         http.onreadystatechange = function() {//Call a function when the state changes.
            if(http.readyState == 4 && http.status == 200) {
                alert(http.responseText);//check if the data was received successfully.
            }
        }
        http.send(data);
}

问题原因分析 #

1. 不是文件只读问题：因为fopen("h.txt", "w")能成功创建文件，说明服务器对目标目录有写入权限，新创建的文件默认也不会是只读状态。核心问题是PHP代码完全没执行读取客户端数据和写入文件的操作，只是打开了文件又立刻关闭。
2. PHP代码缺失关键逻辑：当前代码仅创建了空文件，没有接收客户端POST过来的"456"，也没有调用fwrite()等写入函数。
3. 客户端数据传递不规范：使用application/x-www-form-urlencoded格式时，直接发送纯字符串"456"，PHP无法通过常规方式获取到数据；另外手动设置Content-length头没必要，XMLHttpRequest会自动处理。

解决步骤 #

1. 修正服务端PHP代码 #

替换为以下代码，实现接收POST数据、写入文件，并添加错误处理便于排查问题：

<?php
function writeData() {
    // 获取客户端POST的数据
    $postData = file_get_contents('php://input');

    $filePath = "h.txt";
    // 打开文件，"w"模式会清空原内容并写入，若要追加用"a"
    $myFile = fopen($filePath, "w");
    
    if (!$myFile) {
        echo "错误：无法打开文件 $filePath";
        return;
    }

    // 写入数据
    $writeResult = fwrite($myFile, $postData);
    if ($writeResult === false) {
        echo "错误：写入文件失败";
    } else {
        echo "成功写入 $writeResult 字节内容";
    }

    fclose($myFile);
}

writeData();
?>

2. 修正客户端Angular代码 #

方式一：修正原生XHR代码

调整数据传递格式，去掉不必要的请求头：

testWriteToServerFile() {
    const data = "456";
    const url = "https://objective.no/webapptest2/你的PHP文件名.php"; // 替换成实际PHP文件路径

    const http = new XMLHttpRequest();
    http.open("POST", url, true);

    // 设置正确的Content-Type，适配php://input接收
    http.setRequestHeader("Content-type", "text/plain");

    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            if (http.status === 200) {
                alert(http.responseText);
            } else {
                alert("请求失败，状态码：" + http.status);
            }
        }
    };

    http.send(data);
}

方式二：使用Angular自带的HttpClient（更规范）

先在模块中导入HttpClientModule，然后在组件中注入HttpClient：

import { HttpClient } from '@angular/common/http';

// 组件构造函数注入HttpClient
constructor(private http: HttpClient) {}

testWriteToServerFile() {
    const data = "456";
    const url = "https://objective.no/webapptest2/你的PHP文件名.php";

    this.http.post(url, data, { responseType: 'text' })
        .subscribe({
            next: (response) => alert(response),
            error: (err) => alert("请求失败：" + err.message)
        });
}

3. 权限排查（若仍有问题） #

如果修正代码后还是无法写入，可以检查文件权限：

• 登录服务器，进入webapptest2目录，执行ls -l h.txt查看文件权限
• 确保运行PHP的用户（通常是www-data、apache或nginx）对文件有写入权限，可执行chmod 664 h.txt调整权限（或根据服务器配置调整）

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