백엔드와 프론트엔드의 도메인 주소가 다른 경우가 많습니다. 이는 localhost인 경우에도 마찬가지입니다. 포트가 다르면 다른 주소로 칩니다. 이들간에는 쿠키 전송이 되지 않으므로 로그인이 유지되지 않아서 당황하시는 경우가 많습니다. 특히 개발자도구 Network 탭에서 Response Header에 Set-Cookie는 있는데 Application 탭에서 Cookie를 체크해보면 뜨지 않아서 어디가 문제인지 난처한 경우가 있습니다.
이럴 때 요청/응답 헤더를 적절하게 설정해주면 다른 도메인이더라도 쿠키가 전송됩니다.
먼저 프론트에서 ajax 요청을 보낼 때 withCredentials를 설정해주어야 합니다.
axios.post(주소, 데이터, { withCredentials: 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에 들어갑니다. 와일드카드인 *와는 다릅니다. credentials는 Access-Control-Allow-Origin을 true로 만들어주는 옵션입니다.
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
axios.post(`/user/${userId}/unfollow`)로 언팔로우 버튼을 누를 때 작동하게 만들었는데 해당 라우터를 만들지 않아서 당연히 catch(error)로 error가 뜰거라고 예상했는데 catch에서 잡지를 못하더라구요. 원래 없는 페이지 요청은 catch로 잡을 수 없는 것인가요?
그리고 이건 다른 질문인데, html에서 사용된 console.log는 원래 terminal에는 안보이는건가요? chrome의 개발자 도구에서는 보이길래 여쭤봅니다.
저도 404 error가 나올거라 예상하였는데 pending상태로만 나옵니다. chrome의 개발자도구 network에서 status가 pending으로 나오지만 웹페이지가 로딩상태는 아닙니다.