프론트에서만 httponly설정을 하면 500에러가 뜨는 건 정상인가요?

Question

서버에서는 httponly를 따로 설정하지는 않았습니다. 프론트에서 개발할 때 처음에는 httpOnly를 설정하지 않고 개발했을 때 헤더에 토큰도 잘 들어갔고 api통신도 잘 됐었습니다.그리고 httpOnly를 설정하고 나니 요청헤더에 계속 토큰이 들어가지를 않더라구요 코드는 이런식으로 작성하였습니다.export const fetchUserInfo &#61; createAsyncThunk( 'userInfo/fetchUserInfo', async () &#61;> { try { const getCookie &#61; Cookies.get('token'); setAuthHeader(getCookie); const userInfoResponse &#61; await apiInstance.get('/api/user/me'); return userInfoResponse.data; } catch (error) { throw new Error('Error fetching user info:', error); } } );import axios from 'axios'; const apiInstance &#61; axios.create({ baseURL: process.env.REACT_APP_API_URL, withCredentials: true, }); const setAuthHeader &#61; token &#61;> { apiInstance.defaults.headers.common['Authorization'] &#61; &#96;Bearer ${token}&#96;; }; export { apiInstance, setAuthHeader };

KarlStyner · Answer

Cookies 라는 게 일단 표준 함수나 클래스같은건 아닌 것 같군요.httpOnly 설정을 하면 document.cookie 가 막히게 되는데, Cookies.get은 저걸 써서 쿠키 내용을 가져올 것으로 생각됩니다.* 쿠키는 딱히 제거하지 않으면 브라우저에서 '알아서' 포함해 보내게 됩니다.쿠키를 수동으로 포함해 전송하는 로직을 수정해야 할 듯합니다.올바른 값이 들어가지 않았다고 500 에러를 뿜는 서버 로직을 개선해야 할 것 같습니다.쿠키보다 LocalStorage나 SessionStorage를 사용해 보세요.

뎅이 · Answer

요즘엔 보안취약점 때문에 cookie를 사용하지 않고 localStorage나 sessionStorage를 사용합니다.httpOnly는 서버에서 session cookie 설정할때나 쓰지 이걸 프로그램 상에서 수동 설정하지 않습니다. 인증토큰으로 보이는데 sessionStorage에 넣고, 거기서 빼서 header에 넣는 방식으로 쓰셔야 합니다.

프론트에서만 httponly설정을 하면 500에러가 뜨는 건 정상인가요?

2개의 답변

Q&A 목록