codestates / codestates/BanThing
[Error Handling] CORS 에러
- 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.