使用JS写入同服务器文件的方法及安全错误解决

浏览器端JavaScript没有和fetch读取静态文件对等的、纯前端独立完成的同服务器文件写入能力，你之前触发安全错误是浏览器安全沙箱的默认规则限制：浏览器禁止前端代码直接操作修改服务器端的托管文件，这是基础的Web安全防护机制，和是否同域、是否用fetch接口没有关系。

你之前能用fetch完成同域文件读取，本质是服务器默认对静态资源开放了GET请求响应逻辑——收到对应路径的GET请求就把文件内容返回给前端，这个过程里前端根本没有直接触碰服务器的文件系统，只是拿了服务器返回的响应内容而已。

要实现文件写入必须依赖服务端配合，没有纯前端绕过的方法，具体实现逻辑如下：

• 服务端新增一个接收PUT/POST请求的接口，接口逻辑为：校验请求权限、拿到请求携带的文本内容、将内容写入服务器对应路径的目标文本文件。必须做好路径遍历防护、写入权限控制，避免被恶意攻击篡改服务器任意文件。
• 前端依然可以沿用fetch发送写入请求，和你之前读文件的调用方式基本对齐，示例代码：

// 前端写入调用示例
async function writeTextToFile(fileContent) {
  const response = await fetch('/api/update-text-file', {
    method: 'PUT',
    headers: {
      'Content-Type': 'text/plain'
    },
    body: fileContent
  })
  if (!response.ok) throw new Error(`写入出错，状态码：${response.status}`)
  return response.text()
}

调试注意：如果你是直接双击本地HTML文件、通过file://协议打开页面调试，哪怕目标文本文件和HTML在同一目录下，也会触发跨域/安全策略错误。本地调试需要先启动本地HTTP服务，同时配合本地服务的写入接口才能正常测试。

• 如果你当前用的是纯静态托管服务（无服务端运行能力的静态页托管、对象存储静态站点等），这类服务默认不支持自定义写入接口，要么更换支持边缘函数/服务端函数的托管平台，要么单独部署一个简单的后端服务处理写入逻辑。

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