请求报Invalid content type错误，JSON请求被识别为form-urlencoded

可能的原因及解决方法 #

1. 表单提交事件未被正确拦截（最常见） #

如果你的脚本在DOM加载完成前执行，document.getElementById('signupForm')会返回null，导致事件监听无法绑定，表单会以默认方式提交（Content-Type为application/x-www-form-urlencoded）。

解决方法：

• 将脚本放在HTML文档的<body>末尾，确保DOM元素已加载；
• 或者用DOMContentLoaded事件包裹代码，确保DOM加载完成后再绑定事件：

document.addEventListener('DOMContentLoaded', () => {
  const signupForm = document.getElementById('signupForm');
  
  signupForm.addEventListener('submit', async (event) => {
    event.preventDefault(); // 确认这行代码执行
    
    // 后续请求逻辑...
  });
});

2. JSON格式语法错误 #

你的JSON.stringify中最后一个属性后多了逗号（newPassword: formData.get('newPassword'),），这会导致JSON格式无效，部分浏览器可能会自动调整请求头或拒绝发送正确的JSON请求。

解决方法：
去掉末尾的逗号，修正JSON结构：

body: JSON.stringify({
  newUsername: formData.get('newUsername'),
  newEmail: formData.get('newEmail'),
  newPassword: formData.get('newPassword') // 无末尾逗号
})

3. 服务器端中间件顺序或配置问题 #

虽然你使用了express.json()，但如果中间件在路由之后被注册，它将无法处理请求；或者express.json()的配置被意外修改。

解决方法：
确保express.json()在所有路由之前注册：

const express = require('express');
const app = express();

// 先注册解析中间件
app.use(express.json()); // 仅处理Content-Type为application/json的请求
app.use(express.urlencoded({ extended: true }));

// 再注册路由
app.post('/signup', (req, res) => {
  // 处理请求逻辑
});

4. 请求头被意外覆盖 #

某些浏览器扩展或其他代码可能会修改请求头，导致Content-Type被替换。

解决方法：
在fetch请求中添加日志，确认请求头是否正确：

const requestHeaders = new Headers({
  'Content-Type': 'application/json'
});
console.log('Request Headers:', requestHeaders); // 检查Content-Type是否正确

const response = await fetch('/signup', {
  method: 'POST',
  headers: requestHeaders,
  body: JSON.stringify(...)
});

同时在浏览器开发者工具的网络面板中，查看发送到/signup的请求，确认Content-Type是否为application/json。

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