로컬에선 됐는데 서버배포 후 접속안됨

REST API
1

말 그대로 로컬 주소로는 로그인이 됐는데
서버배포후 주소가 바뀌면서 로그인이 안됩니다!
006에러로 리다이렉트 유알엘 문제라는데 주소 등록은 다 잘 해놨거든요ㅜㅜㅜ

제 인증번호는 903642 입니다!

2

안녕하세요.

redirect_uri 파라미터에 오타가 있습니다.
확인 부탁드립니다.

http://3.106.52.247:3000/auth`
마지막에 벡틱 문자가 포함되어 있습니다.
3

카카오 디벨로퍼 상 말씀이신가요?ᩚ?ᩚ
제 창에서는 백틱이 없어서요!! ㅜㅜㅜ

4

/oauth/authorize 호출하실 때, redirect_uri 파라미터 입니다.

KOE006 오류나실 때, 브라우저의 URL을 확인해보시면 벡틱이 포함된것을 확인하실 수 있습니다.

5

Login.js
import “…/styles/Login.scss”;
import React, {useState} from “react”;
import Form from “react-bootstrap/Form”;
import Button from “react-bootstrap/Button”;
import axios from “axios”;
import {Navigate, useNavigate} from “react-router-dom”;
import “…/styles/Login.scss”;

export default function Login() {
const navigate = useNavigate();

const [userId, setUserId] = useState("");
const [password, setPassword] = useState("");

const validateForm = () => {
return userId.length > 0 && password.length > 0;
};

const handleSubmit = event => {
event.preventDefault();
console.log(userId);
// console.log(password);
// console.log("!!!")
axios({
method: “post”,
url: ${process.env.REACT_APP_DB_HOST}/checkLogin,
data: {
userId: userId,
password: password,
},
}).then(
// res => console.log(“res.data.hasInfo>>”, res.data),
res => {
res.data.hasInfo
? (document.location.href = “/”)
: alert(“로그인에 실패했습니다”);
},
);
};

const kakaoHandleSubmit = event => {
event.preventDefault();
const REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
console.log("*** REST_API_KEY", REST_API_KEY);
const REDIRECT_URI = process.env.REACT_APP_URL;
const link = https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code;

window.location.href = link;

// console.log(userId);
// console.log(password);
const userid = event.target.getAttribute("data-id");
const Password = event.target.getAttribute("data-pw");
// const userid = window.localStorage.getItem("userid");
// const Password = window.localStorage.getItem("pw");
console.log("i want ");
console.log(userid);
console.log(password);
console.log("####################", Password);
axios({
  method: "post",
  url: `${process.env.REACT_APP_DB_HOST}/checkKakaoLogin`,
  data: {
    userId: userid,
    password: Password,
  },
})
  .then(response => {
    if (response.data.hasInfo) {
      // navigate("/", {replace: true});
      document.location.href = "/";
    } else {
      alert("로그인에 실패했습니다.");
    }
  })
  .catch(error => {
    console.log(error);
    alert("서버와의 통신에 실패했습니다.");
  });

};
const loginHandler = () => {
const REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
console.log("*** REST_API_KEY", REST_API_KEY);
const REDIRECT_URI = process.env.REACT_APP_URL;
const link = https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code;

window.location.href = link;

};

REACT_APP_URL=http://localhost:3000/auth 입니다!

저는 도저히 모르겠어서요ㅠㅠ 코드 한번 봐주시면 감사하겠습니다!!