코드스테이츠 소프트웨어 엔지니어링 부트캠프 99

리액트와는 달리 Node JS 에는 fetch() API가 내장되어 있지 않기 때문에 node-fetch 모듈을 설치하거나 axios모듈을 설치한다.

인증/보안 스프린트를 하면서 처음으로 axios를 사용하게 되었다.

Axios

- Post

Content-type 헤더는 응답,요청 메시지에 담겨보네는 데이터의 형식을 나타낸다.

Get 요청의 경우 굳이 Content-type데이터가 필요하진 않다.

URL끝에 쿼리스트링으로 key=value 형식으로 날아가기 때문에 웹서버에서 Get요청이면 key=value형식의 데이터라는 것을 유추할 수 있기 때문이다.

하지만 POST나 PUT 처럼 메시지 body에 데이터를 보낸다면 Content-type은 아주 중요하다.

//두 방법 둘다 사용해도 상관없다.
axios.post('url',{payload},{headers:{header:value}}).then(el=>el).catch(err=>err)

axios({method : 'post', 
       url : 'url', 
       data : {payload}, 
       {headers:{header1:value1}
      }

////
axios.post('https://localhost:4000/login',//url
    {userId : this.state.userId, password : this.state.password},//payload
    {headers:{'content-type':'application/json'},withCredentials:true}//headers
   ).then(...)

- Get

axios.get('url',{ headers:{ Authorization : 'Bearer ' + token } } )

axios({method : 'get',
        url : 'url',
        .
        .
        })

---

Content-type 헤더와 Accept 헤더의 차이

• Content-type 헤더 : HTTP 메시지에 담겨보내는 데이터의 형식을 나타낸다.
  대부분 HTTP 프로토콜을 사용하는 브라우저, 웹서버는 우선적으로 Content-type헤더를 기준으로 HTTP 메시지에 담긴 데이터를 분석,파싱한다. 만약 Content-type 헤더가 없다면 웹서버에서는 요청 데이터를 단순 텍스트로 여기고 이를 분석, 파싱하는 작업을 별도로 할 텐데 이 작업을 생략하기 위해 사용한다.
• Accept 헤더 : 클라이언트에서 웹서버로 요청시 요청메시지에 담기는 헤더이다.
  Accept 헤더는 자신에게 이러한 데이터 타입을 보내달라고 하는 것이다.
  예를 들면 브라우저가 Accept 헤더값을 application/json으로 설정했다면 '웹서버야 json데이터 형식으로 응답해줘' 라고 말하는 것이다.
  물론 해주고 말고는 웹서버 마음이다.

참고 : https://dololak.tistory.com/630