react - CORS 2탄 (Axios 보내기)

Axios 보내는 법!

1. proxy를 사용했을때

proxy를 사용했을때는 별건 없다

예를 들어 게시판의 목록을 불러오는 api가 https://localhost:8080/boards라면

useEffect(()=>{
  axios.get(`/api/boards/`)
  .then((res)=>console.log(res))
  .catch((err)=>console.log(err))
},[]) 

위의 방식으로 쓰면 localhost에서 cors는 해결 될 것이다.

2. process.env를 사용했을때

process.env를 사용할때는 방법이 조금 다르다

.env파일안 값
BASE_URL = https://yourserver/api/ (주의! api는 필수로 다는것입니다. server url에 붙어있는것이 아니에요!!)

axios는 어떻게 보내야할까?

만약 notice라는 공지사항의 목록을 가져온다고 가정하자
백엔드 요청 api = https://yourserver/api/articles/notice

useEffect(() => {
    axios
      .get(`${process.env.BASE_URL}articles/notice`)
      .then((response) => {
        setBoardList([...response.data].reverse())
      })

      .catch(function (error) {
        console.log(error)
      })
  }, [])

axios.method(${process.env.BASE_URL}articles/notice)
이렇게 써야한다. 이때 process.env.BASE_URL뒤에 나오는 단어는 '/'를 쓰지 않고 그 뒤에는 '/'을 쓰는 이유는

BASE_URL의 맨 마지막이 '/api/'로 끝나기 때문!!

위의 방식을 그대로 따라하면 잘될것이다.