[Flutter Web] content type설정

이소진·2021년 8월 26일

flutter

이번 글에서 다룰 내용

json 데이터 전송 시 Content-type 설정
(application/x-www-form-urlenencoded vs application/json)
cors headers 설정

json을 많이 사용함에 따라 post메서드의 header에 들어가는 content-type은 대부분 application/json이다.

하지만 웹페이지와 같은 경우, content-type으로 application/x-www-form-urlenencoded를 사용하기도 한다.

이 둘의 차이점은 무엇일까?🧐

0.content type

http header에 들어가며, 들어가는 데이터의 정보를 담고있다.

1. application/json

content type을 application/json으로 지정한 경우를 말한다
보통 앱(IOS, Andriod)개발에 사용되는 Rest API를 개발할 때 사용된다고 한다

http.Response response = await http.post(Uri.parse(url),
          headers: {
            "Content-Type": "application/json",
          },
          body: json.encode({"email": email, "password": password}));

이 예시는 로그인 할 때 사용되는 코드인데
body에 {"email": email, "password": password} 이런식으로 값을 넣어주면 된다.

2. application/x-www-form-urlenencoded

content type을 application/x-www-form-urlenencoded으로 지정한 경우!
보통 웹페이지를 개발할 때, javascript를 사용해서 데이터를 서버에 요청하는 경우 혹은 HTML Form을 사용해서 요청하는 경우에 사용된다고 한다.

모질라 문서를 참고해보면,

application/x-www-form-urlencoded: &으로 분리되고, "=" 기호로 값과 키를 연결하는 key-value tuple로 인코딩되는 값입니다.

라고 하고있다.

String body="group=${group}&first_name=${name}";
      http.Response response = await http.post(Uri.parse(url),
        headers: {
          "Content-Type":"application/x-www-form-urlencoded",
        },
        body: body);

그리고 이런식으로 사용할 수 있다.
body에 들어가는 표현방식이 위와는 다름을 확인할 수 있다.

그렇다면 content-type이 application/x-www-form-urlenencoded인 경우에 복잡한 json을 body에 보내려면 어떻게 해야할까?

"des":"N",
"kr_desc":{
  "title":titleKr(매개변수로 받은 상태, String임),
  "context":contextKr
},
"en_desc":{
 "title":titleEn,
 "context":contextEn
},

예를 들면 이러한 json인 경우...?
대충 이렇게 바꾸면 되지 않을까? 라는 생각

'des':'N',
'kr_desc': 'title=${titleKr}&context=${contextKr}'
'en_desc': 'title=${titleEn}&context=${contextEn}'

생각....

"des=N&kr_desc=title=${titleKr}&context=${contextKr}&en_desc=title=${titleEn}&context=${contextEn}"

이건 안되나?
등등의 생각...

당연히 body에 저대로 쓰면 아무것도 보내지지 않고
아무것도 모르는 나는 아주 아주 아주 많은 방법을 시도해봤다.

'This field is required'
'string자료형이어야 하는데 Map형을 받고있다'
(에러메세지 까먹음)

등등의 에러메세지를 받을 수 있었ㄷㅏ....
당연히 자료형의 잘못인줄 알고 시작했던 삽질...
content-type이 application/x-www-form-urlenencoded인 경우 복잡한 json을 보내야한다면,,,
content-type을 application/json으로 바꾸는게 빠를 것이다
(만약 그게 된다면,,,)