使用Express+Node时通过Fetch POST数据遇405错误求解决方案

以下是针对这个问题的具体排查和解决步骤：

• 检查Express路由的请求方法配置
  必须确保你的服务器路由明确支持POST请求，不能只配置GET。示例代码：

  // 错误写法：仅处理GET请求
  app.get('/api/submit', (req, res) => {
    res.send('GET request received');
  });
  
  // 正确写法：添加POST路由
  app.post('/api/submit', (req, res) => {
    // 处理前端传来的POST数据
    const payload = req.body;
    res.status(200).json({ status: 'success', data: payload });
  });
  

  同时要核对路由路径和Fetch请求的URL完全一致，包括斜杠、大小写这类细节，路径不匹配也会触发405。

• 解决跨域CORS问题
  若前端页面和服务器不在同一域名/端口，浏览器会先发送OPTIONS预检请求，服务器未处理该请求就会返回405。可以通过两种方式解决：

  1. 使用cors中间件：

     npm install cors
     

     在Express中引入并启用：

     const cors = require('cors');
     // 开发环境可直接允许所有跨域请求，生产环境建议配置指定域名
     app.use(cors());
     

  2. 手动处理OPTIONS请求：

     app.options('*', (req, res) => {
       res.header('Access-Control-Allow-Origin', '*');
       res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
       res.header('Access-Control-Allow-Headers', 'Content-Type');
       res.sendStatus(200);
     });
     

• 确认Fetch请求的参数是否正确
  前端Fetch必须明确指定POST方法，并设置对应请求头，比如发送JSON数据：

  fetch('/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ username: 'test', content: 'hello' }),
  })
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(error => console.error('请求失败:', error));
  

  如果发送的是表单数据，要把Content-Type改为multipart/form-data或application/x-www-form-urlencoded，同时服务器要对应配置解析中间件。

• 检查Express中间件的顺序
  必须先配置请求体解析中间件，再定义路由，否则服务器无法解析POST数据，也可能导致请求异常：

  // 先配置解析中间件
  app.use(express.json()); // 解析JSON格式请求体
  app.use(express.urlencoded({ extended: true })); // 解析表单格式请求体
  
  // 再定义POST路由
  app.post('/api/submit', (req, res) => { ... });
  

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