서버에 요청 시 쿠키 함께 전송하기 + cors 오류 해결

2022. 7. 31. 20:56·Trouble Shooting
반응형

 Problem 1. 

로그인 토큰을 쿠키에 저장하고, 서버에서는 그 토큰을 이용해 login validation을 하고 있었다.

그런데 이미 로그인을 해서 쿠키에 토큰이 있는데도 로그인 정보가 없다고 뜨는 문제가 발생했다.

 

 withCredentials 옵션 추가 

axios.get(`${SERVER_URL}/${endpoint}`, {
  withCredentials: true,
});

 

표준 cors 요청은 기본적으로 쿠키를 설정하거나 보낼 수 없기 때문에 withCredentials부분을 true로 설정해 수동으로 cors 요청에 쿠키값을 넣어줘야 한다.

 

 Problem 2.

이제 쿠키는 잘 전송되는데 cors 오류가 발생했다.

 

 

 서버에서 credentials 옵션 설정하기 

서버에서도 withCredentials 옵션을 설정해줘야 한다.

import cors from 'cors';
import express from 'express';

const app = express();

const corsConfig = {
  origin: true,
  credentials: true,
};

app.use(cors(corsConfig));
app.options('*', cors(corsConfig));

 

말끔하게 해결 완료 ^_^V

반응형

'Trouble Shooting' 카테고리의 다른 글

[Next.js] Unknown property 'jsx' found 오류 해결  (0) 2022.09.11
TypeScript에서 FormData로 이미지 업로드하기  (0) 2022.08.02
VSCode Stylelint 적용안될 때 settings.json 설정하기  (0) 2022.06.13
[React] [nodejs] req.body 데이터 undefined 오류 해결(FormData undefined)  (0) 2021.11.13
[React] 'unexpected use of 'history' no-restricted-globals' 오류 해결 😭  (0) 2021.10.17
'Trouble Shooting' 카테고리의 다른 글
  • [Next.js] Unknown property 'jsx' found 오류 해결
  • TypeScript에서 FormData로 이미지 업로드하기
  • VSCode Stylelint 적용안될 때 settings.json 설정하기
  • [React] [nodejs] req.body 데이터 undefined 오류 해결(FormData undefined)
SH_Roh
SH_Roh
  • SH_Roh
    혼자공부끄적끄적
    SH_Roh
  • 전체
    오늘
    어제
    • 분류 전체보기 (159)
      • FE (39)
        • HTML, CSS (3)
        • Javascript (17)
        • React (11)
        • Next.js (4)
      • Network (1)
      • DevOps (4)
      • Git (1)
      • Trouble Shooting (24)
      • Algorithm (41)
        • Python (2)
        • Data Structure, Algorithm (7)
        • Problem Solving (31)
      • Education (23)
        • Elice AI Track (4)
        • Wanted Pre-Onboarding FE Co.. (19)
      • TIL (25)
      • Etc. (1)
        • 회고 (1)
        • 그냥저냥 (0)
  • 링크

    • Github
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
SH_Roh
서버에 요청 시 쿠키 함께 전송하기 + cors 오류 해결
상단으로

티스토리툴바