前端POST请求API触发405(METHOD NOT ALLOWED)错误求助

核心问题1：请求目标端口错误 #

错误信息显示请求发送到http://127.0.0.1:5500/users，但你的后端服务运行在3008端口，前端的相对路径请求会默认指向当前前端服务器（5500端口），而该端口没有/users的POST路由，直接导致405错误。

修复：修改前端fetch的请求地址 #

将相对路径改为后端的完整地址：

fetch('http://localhost:3008/users',{
  method:"POST",
  headers:{
    "content-type":"application/json"
  },
  body:JSON.stringify(obj)
})

核心问题2：跨域资源共享（CORS）限制 #

前后端端口不同（5500 vs 3008），浏览器会触发跨域安全拦截，即使请求地址正确也会被阻止。

修复：后端配置CORS #

1. 安装cors中间件：

npm install cors

2. 在后端代码中引入并启用（放在路由定义之前）：

const cors = require('cors');
app.use(cors());

核心问题3：请求体解析配置缺失 #

前端：启用Content-Type头 #

你注释掉了content-type头，后端无法识别请求体是JSON格式，需要恢复该配置：

headers:{
  "content-type":"application/json"
},

后端：添加JSON解析中间件 #

Express默认不会自动解析JSON请求体，必须添加中间件才能正常读取req.body：

app.use(express.json()); // 放在路由定义之前

额外优化：添加请求反馈与错误处理 #

在前端fetch中补充响应检查和错误捕获，方便调试：

button.addEventListener('click',(e)=>{
  e.preventDefault()
  var obj = {
    firstname:firstname.value,
    lastname:lastname.value,
    age:age.value
  };
  fetch('http://localhost:3008/users',{
    method:"POST",
    headers:{
      "content-type":"application/json"
    },
    body:JSON.stringify(obj)
  })
  .then(res => {
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
    return res.json();
  })
  .then(data => console.log('提交成功:', data))
  .catch(err => console.error('请求出错:', err))
})

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