[🔧Error_log] 이선영 / 2021-12-16

### 어떤 에러인가요?
> 로컬 환경에서는 쿠키 생성과 삭제가 잘 이루어지나, 배포 환경(ec2)에서는 생성만 되고 삭제는 되지 않는 현상.
> 서버 쪽에서 쿠키는 읽혀지나 삭제만 안 되고 있음.
> `res.cookie('jwt', value, option)`으로 쿠키를 생성하고
> `clearCookie('jwt')` 명령어로 쿠키를 삭제하는 건데 로컬에서는 잘 삭제됨. 배포 환경에서 안될 뿐임.
### 에러 메시지
> 딱히 없음.
> 그저 상황을 담은 코드들을 정리하면 아래와 같음.
```jsx
// server index.js 일부
app.use(cors({
origin:['http://localhost:3000','https://udondam.com'],
credentials: true,
methods: ['GET', 'POST', 'PATCH', 'DELETE' ,'OPTIONS']
}));
app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({extended:true}));

// client 로그인 버튼 쪽 핸들러 함수 일부
const body = { email: loginInfo.email, password: loginInfo.password };
const loginInfoPost = await axios.post(`${process.env.REACT_APP_API_URL}/login`, body, { withCredentials: true });

// server 로그인 처리 일부
const { id, nickname, area, area2, manager, socialType } = userInfo;
const userData = {
userId: id,
nickname: nickname,
area: area,
area2: area2,
manager: manager,
socialType: socialType
}
const token = generateAccessToken(userData);
sendAccessToken(res, token, userData);

// server generateAccessToken, sendAccessToken 함수
generateAccessToken: (data) => {
return sign(data, process.env.ACCESS_SECRET, { expiresIn: "4h" });
}
sendAccessToken: (res, token, userData) => {
res.status(200).cookie("jwt", token,{
sameSite: 'none',
domain: DOMAIN,
path: '/',
secure: true,
httpOnly: true,
expires: new Date(Date.now() + 1000 * 60 * 60 * 48),
}).json({ data: userData });
return ;
}

// client 로그아웃 버튼 핸들러 함수 일부
const logoutResult = await axios.get(`${process.env.REACT_APP_API_URL}/logout`, { withCredentials: true })

// server 로그아웃 처리 함수 전문
logout: async (req, res) => {
// console.log(req.cookie) >> { jwt : ~~~~} 이런 느낌으로 읽혀짐
try {
res.clearCookie('jwt');
// res.cookie('jwt','test',{expires:new Date(Date.now() - 1)}) >> 시도했으나 로컬에선 잘 지워지고 배포에선 안됨
res.status(200).json({"message": "logout!"});
return;
}
catch (err) {
console.log(err);
return res.status(401).json({ "message": "Unauthorized"});
}
}

```

>
### 에러 핸들링 방법
> * 코드스테이츠의 아고라스테이츠에 문의하여 힌트를 얻고 수정했다.
> [Express 공식 문서](http://expressjs.com/en/4x/api.html#:~:text=res.clearCookie(name%20%5B%2C%20options%5D))에서는 아래와 같이 안내하고 있다.

```
Web browsers and other compliant clients will only clear the cookie if the given options is identical to those given to res.cookie(), excluding expires and maxAge.
```
> 즉 웹 브라우저 및 클라이언트는 지정된 옵션이 expires, maxAge를 제외하고 res.cookie()에서 제공된 옵션과 동일한 경우에만 쿠키를 지운다고 한다.
> 그래서 clearCookie에 쿠키의 이름('jwt')뿐만이 아니라 값과 expires, maxAge를 제외한 옵션들도 추가했다.
> 그랬더니 로컬뿐만이 아니라 배포 환경에서도 쿠키 삭제가 잘 됐다.

>
```jsx
// 쿠키 만들 때
res.status(200).cookie("jwt", token,{
sameSite: 'none',
domain: DOMAIN,
path: '/',
secure: true,
httpOnly: true,
expires: new Date(Date.now() + 1000 * 60 * 60 * 48),
}).json({ data: userData });

// 쿠키 없앨 때 - 이전 .ver
res.clearCookie('jwt'); // 로컬에서는 없어지나, 배포 환경에서는 없어지지 않음

// 쿠키 없앨 때 - 수정.ver
// 쿠키 삭제됨!
res.clearCookie('jwt',{
sameSite: 'none',
domain: DOMAIN,
path: '/',
secure: true,
httpOnly: true
}
);
```
>
### 에러 핸들링을 위해 참고한 레퍼런스 링크
> [Express 공식 문서](http://expressjs.com/en/4x/api.html#:~:text=res.clearCookie(name%20%5B%2C%20options%5D))