为什么我使用JS发送POST请求无法创建新的JSON文件？

1. 直接语法错误：请求体未序列化 #

你当前直接给body传入了JS原生对象，fetch不会自动将其转换为JSON字符串，会默认转为[object Object]的无效文本，不符合你设置的application/json格式要求。需要用JSON.stringify()序列化请求体：

// 仅需修改body部分即可
fetch(lowercaseUsernameStr+'_profile_data.json', {
 method: 'POST',
 headers: {
  'Content-Type': 'application/json',
 },
 body: JSON.stringify({
  "publicData": {
    "username": usernameStr,
    "userDescription": userDescription,
    "favoriteGameData": {
     "favoriteGameCategory": favoriteGameCategoryStr,
     "favoriteGameNum": favoriteGameNum
    },
    "stats": {
     "level": 1,
     "levelXP": 0,
     "maxLevelXP": 100,
     "XPUntilNextLevel": 100,
     "totalXP": 0,
     "trophies": 0
    }
  },
  "privateData": {
   "password": passwordStr,
   "email": email,
   "telNum": telNum,
   "userProfilePageVisibilityYesOrNo":
   optionsSelectedOptionStr,
   "userProfilePictureSrc": userProfilePictureSrc
   }
  }
})

2. 核心逻辑错误：前端无法直接创建文件 #

fetch是运行在客户端的HTTP请求API，本身没有直接写入文件系统的权限：

• 若你是本地打开静态HTML（地址栏为file://开头）：浏览器的安全沙箱限制禁止JS直接读写本地磁盘，不可能直接生成JSON文件存储到本地
• 若你部署在HTTP服务器上：静态资源服务器默认不支持处理POST请求访问静态文件路径，会直接返回405 Method Not Allowed错误。你需要额外开发后端接口接收该POST请求，在后端逻辑中将收到的JSON数据写入服务器磁盘生成对应的文件，才能实现你的需求。

3. 缺失响应处理逻辑 #

你当前的代码只写了catch捕获网络层级的错误，就算服务器返回业务错误（比如404、403、500）只要请求成功发出，catch就不会触发，你也感知不到业务层面的错误。需要补充then链处理响应：

fetch(/* 原有请求参数 */)
.then(res => {
  if (!res.ok) throw new Error(`请求错误，状态码：${res.status}`)
  return res.json()
})
.then(data => {
  // 处理创建成功的逻辑，比如跳转到登录页
})
.catch((error)=>{
 alert("Sorry! We could not create your account! Please report the problem and wait until it's fixed! Here is the error: " + error);
 document.location = 'contact_and_email_will.html';
});

额外安全提示 #

不要在前端直接传输明文密码，也不要把明文密码存在JSON文件里，非常容易泄露用户敏感数据，建议密码前端加盐哈希后再传输，后端也要加密存储。

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