codestates / codestates/BanThing

[Error Handling] CORS 에러

Open
#161 0 comments 0 reactions 2 assignees Claimed by @slight-snow View on GitHub
client error server solved
Dominant language
TypeScript
Stars
0
Forks
2
PR merge metrics
No merged PRs in 30d

Description

### 어떤 에러인가요?

- 개인적인 개발환경에서는 카카오 로그인에 성공했는데 프로젝트에서 구현했을때 CORS 에러가 납니다.
이유는 개인적인 환경에서는 같은 도메인에서 요청을해서 CORS 에러가 나지 않았습니다.
 
- 개인적인 환경 : 3000포트 ▶︎ 3000포트 ▶︎ 카카오요청
- 프로젝트 환경 : 3000포트(Client) ▶︎ 80포트(Server) ▶︎ 카카오요청
```javascript
const handleKakaoLogin = () => {
axios
.get(`${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/users/kakaoLogin`)
.then((response) => {
console.log(response);
});
};
```

### 에러 핸들링 방법
- https://kauth.kakao.com/oauth/authorize 요청은 redirect_uri 로 리다이렉트 되야 하므로
비동기 통신 방식으로 호출하시면 안된다고 합니다.
- 따라서 axios 를 이용하여 get 요청을 보내는 방식 대신,
Next.js 에 내장되어 있는 useRouter 기능을 통해 리다이렉트 해주는 방식으로 해결하였습니다.
- 이후 리다이렉트도 정상적으로 기능하고, CORS 에러도 나타나지 않는 것을 확인했습니다.
```javascript
import { useRouter } from 'next/router';

const router = useRouter();
const handleKakaoLogin = () => {
router.push(`${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/users/kakaoLogin`);
};
```

### 에러 핸들링을 위해 참고한 레퍼런스 링크
- Kakao Developers 내에 Dev Talk 의 Q&A 에서 확인했습니다.
[링크](https://devtalk.kakao.com/t/rest-api-cors/114424)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.