인프런 커뮤니티 질문&답변

broccoliindb님의 프로필 이미지
broccoliindb

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

credentials로 쿠키 공유하기

aws에 배포상황, cors 옵션에 credenitals: true, axios에 axios.defaults.withCredentials = true 했는데...왜 프론트에 쿠키가 등록이 안될까요...무한삽질중입니다..

작성

·

874

1

안녕하세요. 쿠키문제로 무한 삽질중입니다.

로컬에서 할 때는 쿠키가 제대로 (localhost:3000), (localhost:3065)에도 등록이 되는걸 확인했습니다.

현재 aws에 배포한 상황입니다.. 백엔드에는 쿠키가 등록이 되는데 프론트에 쿠키가 등록이 안되는 상황입니다.

무슨설정을 잘못하거나 확인해봐야할지 너무 난감하네요. 구글링해도 나오는건

1. 백엔드 프론트 도메인이 달라서 등록이 안된다.

✅ 프론트: broccolidb.com / 백엔드: api.broccolidb.com으로 서브도메인으로 되어있어서 문제라고 생각안됩니다.

2. credentials를 true로 안해줘서 안된다.  

✅ axios에도 cors에도 관련 설정을 등록했습니다. 로컬에서도 확인했는데. 설정들 빼가면서도 확인해봤는데 오타문제는 아니라고 생각합니다.......ㅠ

단서는 아직 찾는중인데..  좀 더 타겟팅할 관련정보를 얻을 수 있을까해서요~

✅ 현재코드: 관련부분만 붙여봤습니다.

// app.js

const sessionOpt = {
resave: false,
saveUninitialized: false,
secret: process.env.SECRET,
cookie: {
httpOnly: true,
secure: false,
//domain: process.env.NODE_ENV === 'production' && '.broccolidb.com'
},
store: new RedisStore({ client: redisClient })
}
const corsOptions = {
origin: ['http://localhost:3000', 'https://broccolidb.com'],
credentials: true
}
app.use(cors(corsOptions))
if (process.env.NODE_ENV === 'production') {
sessionOpt.proxy = true
sessionOpt.cookie.secure = true
app.use(helmet())
app.use(hpp())
}
app.use(session(sessionOpt))

// saga index.js

axios.defaults.baseURL = `${process.env.API_URL}`
axios.defaults.withCredentials = true

// response header 부분

// 프론트 쿠키저장소

//백엔드 쿠키저장소

현재 계속 구글링 중이긴 한데 단서가 혹시 될만한게 있을까해서 문의드립니다.

쿠키 세션 옵션 관련해서는 위에 적은것들 이외에 테스트를 더 해볼건데, 일단 프론트쪽 문제인지 백쪽 문제인지도 확인이 안되서요.  ㅠ

그리고 관련한 에러로그는 현재 없습니다ㅠ

답변 2

0

broccoliindb님의 프로필 이미지
broccoliindb
질문자

reverse proxy하는거 관련해서 

            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_set_header X-Real-IP $remote_addr;

            proxy_set_header Host $http_host;

이렇게 추가해줘서 cookie secure사용을 해결했습니다. 각각의 역할은 아직 개념을 잘 모르겠으나, 저와 같은 문제 발생한 분들은 참고 하면 될거로 생각합니다. 

참고링크: https://velog.io/@broccoliindb/nginx

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

proxy_set_header X-Forwarded-Proto $scheme; 이게 핵심입니다.

0

broccoliindb님의 프로필 이미지
broccoliindb
질문자

cookie의 secure 옵션을 주석처리하니까 되네요. 이상하네요. lets encript로 프론트랑 백엔드 전부 https 처리해줬는데,

reverse proxy로는 뭔가 다른 설정이 필요한건가?? 하고 생각이 드네용 그건 127.0.0.1이니까...흠 한번 확인해볼게요~

broccoliindb님의 프로필 이미지
broccoliindb

작성한 질문수

질문하기