Strapi与React中更新草稿并保留原ID及草稿状态的技术求助（含404报错场景）

阿华AIGC实验室

2026-4-2

问题还原

先帮你把核心问题捋清楚，我之前踩过几乎一模一样的坑：

你在React的Edit.jsx里已经成功拿到了目标草稿的完整数据：

// 控制台输出的草稿详情
{
  id: 5,
  documentId: 'uqmaazyp3zb01az41s0sfzbm',
  Topic: 'test',
  Title: 'Test',
  Publishdate: '2025-09-24T14:31:00.000Z',
  Content: "test",
  createdAt: "2025-09-24T14:33:37.300Z",
  locale: "en",
  publishedAt: null,
  updatedAt: "2025-09-24T14:33:37.300Z"
}

但调用PUT请求http://localhost:1337/api/articles/5时直接返回404 Not Found
换代码后虽然能成功请求，但会生成新的文章ID，变成创建新文章，完全偏离了「更新原有草稿」的需求

可能的原因排查&解决思路

给你几个我亲测有效的排查方向，按顺序来：

1. 先搞定Strapi的接口规则与权限

Strapi的草稿系统有个反直觉的点：草稿的更新接口不能直接用数据库的id，得用documentId，或者给请求加特殊头

你当前用的/api/articles/5是已发布文章的更新接口，草稿的正确更新路由应该是带documentId的格式：
```
PUT http://localhost:1337/api/articles/documentId:uqmaazyp3zb01az41s0sfzbm
```
或者，在请求头里加X-Preview-Draft: true，同时用原id请求，但要先去Strapi后台开权限：
进「设置-角色与权限」，找到你当前用的角色（比如公共/认证用户），在articles的update权限里，勾选「允许操作草稿」，不然Strapi会直接拦截草稿的更新请求返回404

2. React端请求的关键细节修正

你之前的代码之所以会生成新文章，大概率是这两个问题：

不小心用了POST请求（Strapi里POST是创建，PUT才是更新）
请求体里没告诉Strapi「我要更新现有草稿」，反而触发了创建逻辑
给你一个React端的正确请求示例（用fetch的话）：

const updateDraft = async (draftData) => {
  try {
    const response = await fetch(`http://localhost:1337/api/articles/${draftData.id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-Preview-Draft': 'true', // 核心：告诉Strapi这是操作草稿
      },
      body: JSON.stringify({
        data: {
          ...draftData,
          publishedAt: null, // 强制保留草稿状态，别让它自动发布
        }
      })
    });
    const result = await response.json();
    console.log('草稿更新成功', result);
  } catch (err) {
    console.error('更新失败', err);
  }
}