Node.js Express CRUD应用中PATCH请求更新产品出现404错误求助

问题背景 #

前端基于React开发，后端用Node.js Express搭建，通过DynamoDB实现CRUD操作。当前端发起PATCH请求更新产品时，始终返回404错误。

预期行为 #

点击前端「更新」按钮后，选中的产品在数据库中完成更新，产品列表自动刷新展示最新状态。

已执行排查步骤 #

• 确认待更新产品存在于DynamoDB数据库中
• 检查后端路由配置，表面上已正确设置PATCH请求处理逻辑
• 验证前端请求负载中传递了正确的产品ID

代码片段 #

后端路由 #

router.patch('/', async (req, res) => {
  const params = {
    TableName: dynamodbTableName,
    Key: {
      'productId': req.body.productId
    },
    UpdateExpression: `set ${req.body.updateKey} = :value`,
    ExpressionAttributeValues: {
      ':value': req.body.updateValue
    },
    ReturnValues: 'UPDATED_NEW'
  }
  await dynamodb.update(params).promise().then(response => {
    const body = {
      Operation: 'UPDATE',
      Message: 'SUCCESS',
      UpdatedAttributes: response
    }
    res.json(body);
  }, error => {
    console.error('Do your custom error handling here. I am just ganna log it out: ', error);
    res.status(500).send(error);
  })
})

前端更新函数 #

const updateProduct = async () => {
  if (!selectedProduct) return; // 检查是否选中了要更新的产品
  try {
    console.log('About to update the product with ID:', selectedProduct.productId);
    await axios.patch(`http://nodejs-express-crud-env.eba-uqag2f9z.us-east-1.elasticbeanstalk.com/product/${selectedProduct.productId}`, {
      productId: selectedProduct.productId,
      updateKey: 'productName',
      updateValue: productName 
    });
    fetchProducts(); // 更新后刷新产品列表
    setSelectedProduct(null); // 清除选中产品的状态
    setProductId('');
    setProductName('');
    setProductPrice('');
  } catch (error) {
    console.error('Error updating product:', error);
  }
};

前端请求URL（存在语法错误） #

axios.patch('axios.patch(`http://nodejs-express-crud-env.eba-uqag2f9z.us-east-1.elasticbeanstalk.com/product/${selectedProduct.productId}', { /* Payload */ });

问题原因与解决方案 #

核心原因：路由路径不匹配 #

后端配置的PATCH路由是/product/（假设路由挂载在/product路径下），但前端请求的是/product/{productId}，后端没有对应的路由处理这个带参数的路径，因此返回404。

解决方案 #

方案1：修改后端路由，支持URL参数传递productId

调整后端路由为带参数的形式，同时从URL参数中获取productId（更符合RESTful规范）：

router.patch('/:productId', async (req, res) => {
  const params = {
    TableName: dynamodbTableName,
    Key: {
      'productId': req.params.productId // 从URL参数获取ID
    },
    UpdateExpression: `set ${req.body.updateKey} = :value`,
    ExpressionAttributeValues: {
      ':value': req.body.updateValue
    },
    ReturnValues: 'UPDATED_NEW'
  }
  await dynamodb.update(params).promise().then(response => {
    const body = {
      Operation: 'UPDATE',
      Message: 'SUCCESS',
      UpdatedAttributes: response
    }
    res.json(body);
  }, error => {
    console.error('Do your custom error handling here. I am just ganna log it out: ', error);
    res.status(500).send(error);
  })
})

此时前端请求的URL无需修改，同时可以移除请求body中的productId字段。

方案2：修改前端请求URL，匹配后端现有路由

保持后端路由不变，前端请求去掉URL中的productId参数：

await axios.patch(`http://nodejs-express-crud-env.eba-uqag2f9z.us-east-1.elasticbeanstalk.com/product`, {
  productId: selectedProduct.productId,
  updateKey: 'productName',
  updateValue: productName 
});

额外修正：前端请求URL的语法错误 #

你提供的前端请求URL代码存在嵌套axios.patch的语法错误，实际代码中需要修正为正确的模板字符串格式，避免请求地址无效。

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