서버에 응답 헤더 설정하고 클라이언트에서 확인하기

상황

리액트로 클라이언트를 구현하고, express로 서버를 구현하는 프로젝트에서

로그인에서 jwt 토큰을 사용하기로 했다.

서버에서 토큰을 처음 생성해서 클라이언트에 건내줄 때

헤더에 넣어서 보내줘야 한다는 의견이 있었다.

나는 클라이언트가 토큰을 보낼 때 헤더에 넣는 거고,

서버는 그냥 응답 바디나 쿠키에 넣어주는 거라고 알고 있었다.

그래서 클라이언트에서 서버 응답 헤더를 볼 수 있는 방법을 몰랐다.

아무튼 그래서 찾은 방법은 다음과 같다.

---

1. 서버에서 응답 헤더 설정하기

app.post('/test', (req, res)=>{
  res.set("name", "value") // 헤더 키, 값 설정
  res.send();
})

 

2. 클라이언트에서 응답 헤더 확인하기

async function requestServer(){
  const res = await axios.post('서버주소/test', { /* body */ });
  console.log(res.headers) // 안 찍힘
}

응답에서 headers를 콘솔에 찍어보면 되는데,,

응 안 찍혀~

 

3. 서버에서 cors 설정 옵션에 exposedHeaders를 설정해줘야 했다.

exposedHeaders: ['노출할 헤더 키', ...]

 

4. cors 옵션에서 설정한 키는 클라이언트에서 res.headers를 찍을 때 잘 보인다.

 

5. 문제는 서버에서 응답 헤더 Authorization에 토큰을 넣어 보내주기로 했다는 것이다.

이놈은 일단 exposedHeaders를 해도 클라이언트에서 안 보인다^,ㅜ..

아마 저건 기본제공? 이라고 하긴 그런데 원래 있는 키일거고

아마 어떤 조치가 취해져있는 듯한 늑힘,,이다

이 부분은 더 알아보고 추가하겠다.

 

프로젝트는 바디에 붙여서 보내는 걸로 바꿨다.