React应用POST请求API遇500错误及Token识别问题求助

问题描述 #

我在React应用中向API发送POST请求保存清单时，收到500服务器错误，控制台也出现对应报错。先后尝试用fetch和axios发起请求，问题仍未解决。

请求代码（fetch版本） #

const accessToken = '29283b3ef76dcce0b65c77cf41f6cb86400920f2';
const baseURL = 'https://greenvelvet.alwaysdata.net/pfc';

const handleSaveChecklist = async () => {
  // ... (其他代码)
  
  try {
    const response = await fetch(`${baseURL}/checklist/add`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${accessToken}`,
      },
      body: JSON.stringify(checklistData),
    });

    const data = await response.json();
    console.log('Server response:', data);
    setCreateMessage(`Checklist "${checklistData.title}" created.`);
  } catch (error) {
    console.error('Error saving the checklist:', error);
    setCreateMessage(`Failed to create checklist. Error: ${error.message || 'Unknown error'}`);
  }
};

错误信息 #

已验证Token正确，但JSON响应返回错误：

{"error":"Token is not unknown"}

同时请求返回500 Internal Server Error。

补充说明 #

项目需向指定API发起异步AJAX请求，已按照API文档指引，通过订阅接口生成唯一Token，并将其用于请求的Authorization头中。确认端点正确、支持POST请求，Token有效且具备必要权限，但问题依旧。以下是另一段参考代码：

const accessToken = '29283b3ef76dcce0b65c77cf41f6cb86400920f2';
const baseURL = 'https://greenvelvet.alwaysdata.net/pfc';

const handleSaveChecklist = async () => {
    try {
        const response = await fetch(`${baseURL}/checklist/add`, {
            method: 'post',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${accessToken}`
            },
            body: JSON.stringify(checklistData),
        });

        if (!response.ok) {
            throw new Error("Error happened");
        }

        const data = await response.json();
        console.log('Server Response:', data);
         setCreateMessage(`Checklist "${checklistData.title}" created.`);
    } catch (error) {
        console.error('Error during checklist save:', error);
         setCreateMessage(`Failed to create checklist. Error: ${error.message || 'Unknown error'}`);
    }
};

解决建议 #

• 先处理错误提示的歧义："Token is not unknown"明显是后端文案错误，实际应为“Token不被识别”或“无效Token”。重新生成Token并测试，确保生成Token的接口与请求清单的接口属于同一服务，避免环境不一致问题。
• 验证请求头的实际发送情况：用浏览器开发者工具的Network面板查看请求，确认Authorization头是否完整发送（Bearer与Token间的空格是否存在、Token是否正确），排查是否被浏览器或代理篡改。
• 检查请求体格式：后端可能对checklistData的字段有严格要求，比如必填title、字段类型匹配等。先简化请求体（仅传title字段）测试，确认是否因字段缺失或格式错误导致报错。
• 确认JSON格式合法性：确保JSON.stringify(checklistData)生成的是合法JSON，没有语法错误，同时Content-Type头确实为application/json。
• 绕过前端直接测试API：用Postman或curl发送相同请求，若工具中请求成功，问题出在React代码；若工具中也失败，需排查后端API或Token有效性。
• 查看详细错误信息：在Network面板的Response标签中，查看是否有后端返回的堆栈信息或更详细的错误描述，进一步定位问题。

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