Ant Design Pro 400 错误解决方案：调试技巧与最佳实践

今天在使用ant design pro 的时候,发送请求总是提示400错误, 排查很长时间,记录下来。

起初是参考示例里的写法：

export async function addRule(options?: { [key: string]: any }) {
  return request<API.RuleListItem>('/api/rule', {
    method: 'POST',
    ...(options || {}),
  });
}

但是请求一直是400,在请求中打印请求数据，打印出来的options各项数据都是正常的。postman 验证后端接口也是没有问题。


export async function addRule(options?: { [key: string]: any }) {
  console.log('Request options:', options); // 打印请求选项 打印出来是正常的
  return request<API.RuleListItem>('/api/rule', {
    method: 'POST',
    ...(options || {}),
  });
}

但是实际上参考 umi request 的使用文档，post 数据是应该放到 data 字段里的,如果没有使用过这个框架,参考ant design pro的示例代码, 这里是个大坑。

https://github.com/umijs/umi-request/blob/master/README_zh-CN.md

改成下面这样的方法,才能正常请求:

export async function addArticle(options?: { [key: string]: any }) {
  return request<API.Article>('/api/admin/add-article', {
    method: 'POST',
    data: (options || {}),,//把数据包含在data中
  });
}

微信公众号