소셜 로그인 - 카카오 로그인 CORS 에러 발생할 때 - NextJS (frontend)

별건 아니고... 초창기에 흔히 하기 쉬운 실수..(?)

 

 

Access to fetch at 'https://accounts.kakao.com/login?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A3000%252Flogin%26through_account%3Dtrue%26client_id%3Dff30835bba2350bfe5fcf200c1eb4891' (redirected from 'https://kauth.kakao.com/oauth/authorize?client_id=ff30835bba2350bfe5fcf200c1eb4891&redirect_uri=http://localhost:3000/login&response_type=code') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

로그인 요청 보낼 때 fetch 나 axios, ajax 비동기 요청함수로 보내면 CORS 에러난다

 

<a>, <Link> 로 리다이렉트 시켜야함

 

코드 요청부터 백엔드에서 다 한다고 해도, 백엔드로 요청하는 것부터 리다이렉트로 요청해야함

 

첫 시작은 url 로 get 요청

 

"use client";

import Link from "../../../node_modules/next/link";

export default function KakaoLoginButton() {
  return (
    <Link
      href={"http://localhost:5500/members/signin/kakao"}
      style={{ color: "black", backgroundColor: "yellow", padding: "10px" }}
    >
      카카오 로그인
    </Link>
  );
}