게시글

강좌24 - NodeJS - 2달 전 등록

다른 도메인간 쿠키 전송하기(axios와 express 예제)

조회수:
0
Node.js교과서 책이 출간되었습니다. 이 포스팅보다는 책이나 동영상 강좌를 보시는 것을 추천합니다.

백엔드와 프론트엔드의 도메인 주소가 다른 경우가 많습니다. 이는 localhost인 경우에도 마찬가지입니다. 포트가 다르면 다른 주소로 칩니다. 이들간에는 쿠키 전송이 되지 않으므로 로그인이 유지되지 않아서 당황하시는 경우가 많습니다. 특히 개발자도구 Network 탭에서 Response Header에 Set-Cookie는 있는데 Application 탭에서 Cookie를 체크해보면 뜨지 않아서 어디가 문제인지 난처한 경우가 있습니다.

이럴 때 요청/응답 헤더를 적절하게 설정해주면 다른 도메인이더라도 쿠키가 전송됩니다.

먼저 프론트에서 ajax 요청을 보낼 때 withCredentials를 설정해주어야 합니다. xhr이라면 withCredentials이고, axios라면 credentials 옵션으로 되어있습니다.

axios.post(주소, 데이터, { credentials: true });

순수한 xhr이라면 xhr.withCredentials = true를 추가하세요.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null); 

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials 

서버에서는 CORS 설정을 해주어야 하는데요. CORS 설정은 제 CORS 게시글을 참조바랍니다.

여기에 응답 헤더로 Access-Control-Allow-Credentials 옵션도 설정해주셔야 쿠키가 전송됩니다. Access-Control-Allow-Credentials를 true로 설정하고 Access-Control-Allow-Origin 옵션도 *가 아닌 정확한 도메인을 적어주면 됩니다.

express 사용 시 cors 모듈로 쉽게 설정할 수 있습니다.

const cors = require('cors');

app.use(cors({
  origin: true,
  credentials: true
}));

origin: true는 프론트 도메인 주소가 자동으로 Access-Control-Allow-Origin에 들어갑니다. 와일드카드인 *와는 다릅니다.

cors 모듈을 사용하지 않더라도 라우터에서 응답 헤더를 직접 넣어주시면 됩니다. 

res.setHeader('Access-Control-Allow-Origin', 'localhost:3000');
res.setHeader('Access-Control-Allow-Credentials', 'true'); 

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials 

투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.

댓글

아직 댓글이 없습니다.