Axios 러닝 가이드

application/x-www-form-urlencoded

기본적으로 axios는 JavaScript 객체를 'JSON'으로 직렬화(serialize) 합니다. application/x-www-form-urlencoded 포멧 대신 데이터를 보내려면 다음 옵션 중 하나를 사용할 수 있습니다.

브라우저

브라우저에서 다음과 같이 URLSearchParams API를 사용할 수 있습니다.

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
1
2
3
4

NOTE

URLSearchParams는 모든 브라우저에서 지원되지는 않지만, 사용할 수 있는 polyfill이 있습니다.

또는 qs 라이브러리를 사용하여 데이터를 인코딩 할 수 있습니다.

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

ES6+ 사용하는 경우는 아래와 같이 작성할 수 있습니다.

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,
};
axios(options);
1
2
3
4
5
6
7
8
9

Node.js

다음과 같이 querystring 모듈을 사용할 수 있습니다.

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

물론 qs 라이브러리를 사용할 수도 있습니다.

const qs = require('qs');
axios.post('http://something.com/', qs.stringify({ foo: 'bar' }));
1
2

NOTE

Node.js의 querystring 메소드는 중첩된 객체를 문자열화 하는데 문제점이 있습니다. 중첩된 객체를 문자열화 해야할 경우가 잦을 경우 qs 라이브러리 사용이 권장됩니다.

← 참고 →