FastAPI, Javascript query string

FastAPI의 OAuth2를 사용해 로그인 기능을 구현하면서 쿼리스트링으로 데이터 전송이 필요했다. 쿼리스트링으로 데이터 전송시 두 가지의 방법을 사용할 수 있다.

OAuth2의 Content-Type
보통의 FastAPI post 요청 시, Content-Type으로 application/json을 사용한다.
하지만 OAuth2에서는 Content-Type으로 application/x-www-form-urlencoded를 사용해야 한다.

1. qs 모듈

qs?

보안이 추가된 쿼리스트링 변환 라이브러리로,
querystring 모듈보다 언어 호환성 측면에서 편리하게 사용 가능하다.

github

설치

npm install qs

사용 (.js)

import qs from "qs"

...
 
var params = {
	username: name,
	password: password
};
 
 ...
 
 var body = qs.stringfy(params);

JSON 형태로 만든 변수를 쿼리스트링 형식의 문자열로 변환하여 api를 호출한다.

2. URLsearchParams

URLsearchParams?

URL의 쿼리스트링 유틸리티 메서드를 정의한다.

MDN 문서

사용 (.js)

var params = new URLSearchParams();
params.append('username', name);
params.append('password', password);

...

var body = params.toString();

qs 모듈과 동일하게 쿼리스트링 형식의 문자열로 변환하여 api를 호출한다.

• qs 모듈과 달리 URLsearchParams은 별도의 라이브러리 설치가 필요하지 않다. 웹 프론트에서 Node.js를 사용하지 않고 순수 javascript와 ajax를 사용해 fastapi 호출할 때는 위와 같이 URLsearchParams 사용하여 로그인 기능을 개발할 수 있다.