cors 실패(카카오 로그인 관련)
리액트(버셀 배포) + 노드(aws 배포)
1.node와 nginx 둘다 origin 설정 O -> X: cors 에러
2.nginx만 origin 설정 —> X: 502 에러
// node
app.use(
cors({
// origin: "https://bitrics.vercel.app",
credentials: true,
})
);
JavaScript
복사
// nginx
location / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
add_header 'Access-Control-Allow-Origin' 'https://bitrics.vercel.app' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
}
JavaScript
복사
3. node만 origin 설정 -> 카카오만 cors 에러 + 나머지는 오류 X
// node
app.use(
cors({
origin: "https://bitrics.vercel.app",
credentials: true,
})
);
JavaScript
복사
// nginx
location / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
JavaScript
복사
4. node와 nginx 둘다 origin 설정 X -> X: cors 에러 + 502 에러
5. node는 배포 주소, nginx는 로컬 주소 -> X: cors 에러
해결
서버
1.
세션을 쓰는 상황에서는 origin에 “*” X
2.
3번 node만 origin 설정 사용
3.
kakao callback url: https 로 시작하는 값 확인
프론트
1.
리액트에 withcredentials: true 설정 O
2.
axios 비동기 요청함수 X a태그로 리다이렉트 O
=> 세션 사용하려면 둘이 다른 배포 환경이니 서버에서 credentials: true + 프론트에서 withcredentials: true 설정해줘야 함