• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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

21.05.15 14:58 작성 조회수 700

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 부분

// 프론트 쿠키저장소

//백엔드 쿠키저장소

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

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

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

course-thumbnail

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

credentials로 쿠키 공유하기

강의실 바로가기

답변 2

·

답변을 작성해보세요.

0

broccoliindb님의 프로필

broccoliindb

질문자

2021.05.15

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

조현영님의 프로필

조현영

지식공유자

2021.05.15

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

0

broccoliindb님의 프로필

broccoliindb

질문자

2021.05.15

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

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

이 글과 비슷한 Q&A