cors & proxy

문제 상황

백엔드 IP 주소 : http://12.34.56.78:1234 라고 가정

/logout api로 요청시 계속 cors 에러 발생

---

해결

한참 찾아보다가 CRA에서의 서버가 따로 있다는 것을 알게됨
localhost:3000 (너무 당연하게 사용해서 의미를 생각하지 않았었다)

localhost:3000 에서 http://12.34.56.78:1234 로 접근하니까 오류가 난다

그래서 proxy서버가 필요하다.

package.json에서 "proxy":"http://12.34.56.78:1234" 라고 설정해주고,

기존의 axios.get("http://12.34.56.78:1234/logout?token=${token}")
이런방식으로 요청하지 않아도
proxy가 잡혀있기 때문에
axios.get("/logout?token=${token}") 이렇게 요청해도 된다.

logout.jsx

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import "../styles/Login.css";
import axios from "axios";

function Logout() {
  const history = useHistory();
  useEffect(() => {
    const token = sessionStorage.getItem("token") || null;
    axios
      .get(`/logout?token=${token}`)
      .then(function (res) {
        if (res.status === 200 && res.data.msg) {
          sessionStorage.clear();
          history.push("/");
        }
      })
      .catch(function (err) {
        console.error(err);
        alert("로그아웃에 실패하였습니다.");
      });
  }, [history]);

  return <div>logout</div>;
}

export default Logout;