api react 로그인 기능구현

os : window

refreshtoken token을 이용하여 로그인 연장을 하려고 하는데 계속 오류가 생기네요

refreshtoken token을 이용한 로그인 코드는 아래와 같고

import axios from "axios";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { AiOutlineLeft } from "react-icons/ai";


const Login = () => {
  const navigate = useNavigate();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const url = ""


  const onSubmit = (event) => {
    event.preventDefault();
    axios
      .post(url + "/api/login", {
        email: email,
        password: password,
      })
      .then((res) => {
        console.log(res);
        localStorage.setItem("authorization", res.headers.authorization);
        localStorage.setItem("refreshtoken", res.headers.refreshtoken);
         setInterval(onSilentRefresh, 60000);
    
      })
      .catch((Error) => {
        console.log(Error)
        alert("일치하는 회원 정보가 없습니다.");
      });
  };
  
  const onSilentRefresh = () => {
    axios.post(url+"/api/oauth/token", {
      authorization: localStorage.getItem("authorization"),
      refreshtoken: localStorage.getItem("refreshtoken")
    })
        .then((response)=>{
          console.log(response);
          console.log("연장됨")
          localStorage.setItem("authorization",response.headers.authorization);
          localStorage.setItem("refreshtoken",response.headers.refreshtoken);
          setInterval(onSilentRefresh, 60000);
        })
        .catch(error => {
          alert("연장실패.");
          console.log(error)
            // ... 로그인 실패 처리
        });
}


    return  (
        <div >
          <div className="Login">
          <AiOutlineLeft
          size={24}
          onClick={() => {
            navigate(-1);
          }}
        />
            <div className="inputemail">
              <label>Email</label>
              <br/>
              <input
                type="text"
                onChange={(e) => {
                setEmail(e.target.value);
               }}
                placeholder="email..."
              />
            </div>
            <div  className="inputpassword">
              <label>password</label>
              <br/>
              <input
                type="password"
                onChange={(e) => {
                  setPassword(e.target.value);
                }}
                placeholder="password..."
              />
             </div>
            <button className="buttonlogin" onClick={onSubmit}>Login</button>
          </div>
            <button onClick={()=>navigate('/join')}>회원가입하기</button>
        </div>
      );
}

export default Login;

위 코드를 이용해서 로그인 연장을 시도했을때 계속 아래와 같이 오류가 발생합니다. 이유가 무엇일까요?

콘솔창에서의 오류

오류난 코드 부분

네트워크상에서의 오류

위 코드는 아래 링크를 참고하였습니다.
https://velog.io/@toquf0797/%EB%A6%AC%EC%95%A1%ED%8A%B8-JWT-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%97%B0%EC%9E%A5