Formato x-www-form-urlencoded

URLSearchParams

De forma predeterminada, axios serializa los objetos JavaScript a JSON. Para enviar datos en el formato application/x-www-form-urlencoded en su lugar, puedes usar la API URLSearchParams, que es compatible con la gran mayoría de los navegadores, y con Node.js a partir de la versión v10 (lanzada en 2018).

const params = new URLSearchParams({ foo: 'bar' });
params.append('extraparam', 'value');
axios.post('/foo', params);

Cadena de consulta Muy antiguo

Para navegadores más antiguos o entornos sin URLSearchParams, puedes usar la librería qs para serializar objetos al formato application/x-www-form-urlencoded.

const qs = require('qs');
axios.post('/foo', qs.stringify({ bar: 123 }));

Para tener control total sobre los encabezados y el método, pasa la salida de qs.stringify como data de la solicitud y establece Content-Type explícitamente:

import qs from 'qs';

const data = { bar: 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
+  url: 'https://example.com/',
};
axios(options);

En versiones muy antiguas de Node.js, puedes usar el módulo integrado querystring que viene con Node.js. Ten en cuenta que este módulo fue marcado como obsoleto en Node.js v16 — prefiere URLSearchParams o qs para código nuevo.

const querystring = require('querystring');
axios.post('https://something.com/', querystring.stringify({ foo: 'bar' }));

Prefiere qs para objetos anidados

La librería qs es preferible si necesitas serializar objetos anidados, ya que el método querystring tiene problemas conocidos con ese caso de uso.

Serialización automática a URLSearchParams Nuevo

A partir de la versión v0.21.0, axios serializa automáticamente los objetos JavaScript a URLSearchParams si el encabezado Content-Type está establecido en application/x-www-form-urlencoded. Esto significa que puedes pasar un objeto JavaScript directamente a la propiedad data de la configuración de solicitud de axios. Por ejemplo, al pasar datos a una solicitud POST:

const data = {
  x: 1,
  arr: [1, 2, 3],
  arr2: [1, [2], 3],
  users: [
    { name: 'Peter', surname: 'Griffin' },
    { name: 'Thomas', surname: 'Anderson' },
  ],
};

await axios.postForm('https://postman-echo.com/post', data, {
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
});

El objeto data será serializado automáticamente a URLSearchParams y enviado en el formato application/x-www-form-urlencoded. El servidor recibirá los siguientes datos:

{
  "x": "1",
  "arr[]": ["1", "2", "3"],
  "arr2[0]": "1",
  "arr2[1][0]": "2",
  "arr2[2]": "3",
  "users[0][name]": "Peter",
  "users[0][surname]": "Griffin",
  "users[1][name]": "Thomas",
  "users[1][surname]": "Anderson"
}

Si el analizador de cuerpo de tu backend (como body-parser de express.js) admite la decodificación de objetos anidados, recibirás el mismo objeto en el lado del servidor automáticamente.

Límite de profundidad para la serialización de parámetros

Cuando axios serializa un objeto params mediante AxiosURLSearchParams, se llama al mismo recorrido recursivo utilizado por el serializador de FormData. Una opción maxDepth (predeterminado 100) limita la profundidad de recursión. Las cargas útiles que exceden el límite lanzan un AxiosError con code: 'ERR_FORM_DATA_DEPTH_EXCEEDED' en lugar de desbordar la pila de llamadas.

// Aumentar el límite si tu objeto params legítimamente anida más de 100 niveles:
axios.get('/api', { params: deepObject, paramsSerializer: { maxDepth: 200 } });

Nota de seguridad

Solo aumenta maxDepth si tu esquema realmente lo requiere. El valor predeterminado de 100 protege el código del lado del servidor que reenvía datos controlados por el cliente a axios como params contra ataques DoS mediante objetos profundamente anidados.

var app = express();

app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies

app.post('/', function (req, res, next) {
  // echo body as JSON
  res.send(JSON.stringify(req.body));
});

server = app.listen(3000);