vue3에서 axios로 post 호출할때 CORS 정책에 막히는 문제

한참 vue로 api 호출 작업을 하던 중 어떠한 난관에 부딪혔다

분명 get api는 멀쩡히 잘 호출됐는데 post api가 호출이 안되는것이다

오류메세지를 잘 보니 CORS 정책에 의해 접근 불가능..

찾아보니 api 도메인과 프론트단의 도메인(localhost)이 안맞아서 그런거였다

백엔드측에서 해결해주는 방법도 있는것같은데 문제는 대빵님은 휴가고 이 api를 만든 백엔드는 신입이였다

holly...

좀 찾아보니 프론트단에서도 해결 가능한 방법이 있는듯 했다

나는 vue3 vue-cli로 작업중이었기에

 vue.config.js 파일에서 proxy를 추가해주는 방법이었다.

proxy는 내 화면을 바로 호출해주지 않고 가상도메인을 만들어서 호출해주는 뭐 vpn의 도메인버전같은 녀석이다

그렇기에 가상도메인을 api호출을 하는 도메인과 맞춰주면 api도메인=내프론트단도메인이 동일화된다.

 

module.exports = defineConfig({
  devServer:{
  proxy: {
    '/API': {
        target: 'API 도메인 주소',
        changeOrigin: true,
        pathRewrite : {
          '^/API' : ''
        }
    }
  }
}

이렇게 config쪽에 설정해줬으면 api 호출하려하는 컴포넌트로 가서

function postChargeSend(CountryNum, CountryName, MobileNum){
    return axios.post('API/send',{
        countryCode : CountryNum,
        countryName : CountryName,
        mobile : MobileNum,
    },{
        headers:{
            'Content-Type': 'application/json'
        }
    });
}

자 이렇게 api 호출 선언을 해준다

API/를 써주면 proxy에 설정해둔 도메인이 호출된다.
참고로 proxy쪽에 '/' 이렇게 절대경로를 설정하면

node.js에서 오류날 확률이 크다(내가 그랬다)

그래서 변수를 설정해주고 컴포넌트에서 api호출시 경로에 변수를 처음에 넣어준다.

그리고 제일 중요한거 header에 Content-Type : application/json 설정 꼭 해주자..