使用 Axios 发送 JSON 数据

Question

如果您将 JavaScript 对象作为第二个参数传递给 axios.post() function ，Axios 会自动为你将对象序列化为 JSON。 Axios 还将设置 Content-Type 标题到 'application/json' 这样的 web 框架 Express 可以自动解析它。

// Axios automatically serializes `{ answer: 42 }` into JSON.
const res = await axios.post('https://httpbin.org/post', { answer: 42 });

res.data.data; // '{"answer":42}'
res.data.headers['Content-Type']; // 'application/json;charset=utf-8',

这意味着您通常不必担心将 POST 正文序列化为 JSON：Axios 会为您处理。

使用预序列化的 JSON

如果您碰巧有一个想要作为 JSON 发送的序列化 JSON 字符串，请小心。 如果您将字符串传递给 axios.post()，Axios 将其视为 表单编码的请求体 。

const json = JSON.stringify({ answer: 42 });
const res = await axios.post('https://httpbin.org/post', json);

// Axios automatically sets the `Content-Type` based on the
// 2nd parameter to `axios.post()`.
res.data.headers['Content-Type']; // 'application/x-www-form-urlencoded',

解决方案很简单：确保设置 Content-Type 如果您将预序列化的 JSON 字符串传递给 axios.post()。

const json = JSON.stringify({ answer: 42 });
const res = await axios.post('https://httpbin.org/post', json, {
  headers: {
    // Overwrite Axios's automatically set Content-Type
    'Content-Type': 'application/json'
  }
});

res.data.data; // '{"answer":42}'
res.data.headers['Content-Type']; // 'application/json',