React 와 express로 로그아웃 구현하기

1. 첫번째 오류  -  cors 에러

분명히 서버와 프론트 코드가 맞게 잘 들어가 있었다. 하지만 다음과 같은 에러가 떴다.

 

 

HTTP 204 성공 상태의 응답이 뜨고 있었고

 

서버에서도 성공 응답인 200 번 뜨고 있었다.

 

클라이언트와 서버 모두 cors 에러를 해결할 수 있는 조건들이 분명이 들어가있었다.

app.use(express.urlencoded({ extended: false}));
app.use(
    cors({
        origin: "http://localhost:3000",
        method: ["GET", "POST", "DELETE", "PUT"],
        credential: true,
    })
);

    const logoutApi = async () => {
        try {
            const response = await fetch("http://localhost:8000/user/logout", {
                method: 'POST',
                credentials: 'include', // 쿠키 전송 설정
                mode: 'cors',
                headers: {
                    "Content-type": "application/json",
                },
                body: JSON.stringify({ 
                    // 로그아웃 요청 본문
                }),
            });
    
            if (!response.ok) {
                throw new Error('로그아웃 실패');
            }
    
            clearSession(); 
            console.log('로그아웃 성공');
            // 세션 관련 정보를 클리어하는 함수 호출
        } catch (error) {
            console.error('로그아웃 오류:', error);
        }
    };

 

이유를 알 수 없었고 chat GPT도 같은 대답만하고 해결 방법이 없었다. 정말 chat GPT가 알려준 방법도 다 써보았다. 근데 똑같은 에러가 되풀이 될 뿐이었다. 반쯤 미쳐가면서 폭풍 검색을 하다가 아래 코드를 발견했고 상단에 넣어 주니 해결 되었다.

//서버에서 CORS 헤더를 직접 설정
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
});

 

 

2. 두번째 오류  -  Redux 로직 설계 오류

메인페이지에서 isLogin 상태를 가지고 자동 로그인 하는 기능이 설정 되어서 module 폴더에 logout.js파일을 따로 만들었다.

 

 

이게 문제가 되었다. 리덕스를 쓰는 이유가 모든 상태를 액션으로 정의해서 상태를 관리하는데 이미 login.js 안에 isLogin정의된 상태를 두고 또다시 파일을 만들어서  상태를 보내려고 하니 계속 ture 상태에서 fasle로 바뀌지 않는 것이 었다.

 

logout.js 파일을 지우고  login.js 파일에서 SET_USER_LOGOUT 액션을 정의해서 페이지에 dispatch로 한번에 보냈다.

import { createAction, handleActions } from "redux-actions";

// type 셍성
const SET_PREVIOUS_URL = "login/SET_PREVIOUS_URL";
const SET_USER = "login/SET_USER";
const SET_USER_STATUS = "login/SET_USER_STATUS";
const SET_USER_LOGOUT = "login/SET_USER_LOGOUT";

const DELETE_USER_REQUST = 'DELETE_USER_REQUEST';
const DELET

// 초기값
const userInitialValue = {
    currentUser: {},
    isLogin: false,
    previousURL: "",
    isLoading: false,

};

/**
 *  로그아웃 로직이 잘못됨
 *  login logout 리덕스를 하나로 합쳐서 dispath로 한번에 보내야함
 */

// action을 생성
export const setPreviousURL = createAction(SET_PREVIOUS_URL, (previousURL) => previousURL);
export const setUser = createAction(SET_USER, (currentUser) => currentUser);
export const setUserStatus = createAction(SET_USER_STATUS, (isLogin) => isLogin);
export const setUserLogout = createAction (SET_USER_LOGOUT,(currentUser, isLogin)=>({currentUser,isLogin}));

// reducer 생성
const loginReducer = handleActions(
    {
        [SET_PREVIOUS_URL]: (state , action) => ({ ...state, previousURL: action.payload }),
        [SET_USER]: (state, action) => ({ ...state, currentUser: action.payload }),
        [SET_USER_STATUS]: (state , action) => ({ ...state, isLogin: action.payload }),
        [SET_USER_LOGOUT]: (state , action) => ({
            ...state, 
            currentUser:action.payload.currentUser, 
            isLogin:action.payload.isLogin
        }),
    },
    userInitialValue
);

export default loginReducer;

  

결과는 대성공!!