[Vue.js] axios로 API 호출할때 발생할 수 있는 cors 오류 해결법(중 하나) + proxy 적용을 했는데 404 error가 뜨는 경우

글 작성에 앞서, 이 글에선 백앤드 처리로 해결하는 해법은 다루지 않겠다. 

백앤드에서 세팅해줘도 될 문제이긴 하지만, 그게 여의치 않은 경우를 전제로 하기에 이 글에선 백앤드에 세팅하는 방법은 언급하지 않겠다. 백앤드 세팅이 가능한 상황에 있는 사람이라면 쉬우니까 따로 찾아서 해보자

 

언제나 그랫듯 선결론. 이번엔 케이스가 두가지이므로 두개.

1. axios 세팅으로 proxy 설정을 했음에도 cors 오류가 뜨는 경우

axios로 proxy 설정을 했는데도 계속 cors오류가 난다면 세팅이 적용이 안됐을 수 있다. Vue의 특성상 인스턴스에 추가해주지 않은 모듈들을 import해서 사용할 경우 각 세팅이 제대로 적용이 안될 수 있다. 그러므로 axios는 왠만하면 아래 예제처럼 사용해주자

Vue.prototype.$axios = axios.create({
  timeout: 원하는 timeout 시간(당연히 ms단위),
  headers: {
    // 헤더 세팅
  },
  proxy: {
    // url 리소스를 추가해주자
    "/depth1/depth2...": {
      // 해당 리소스가 있는 url일 경우 타겟으로 baseURL을 변경
      target: 변경할 URL,
      // 기본 베이스URL을 바꿔줄지 여부
      changeOrigin: true
    },
    // 이런식으로 여러개를 해도 됨
    "/depth_a/depth_b...": {
      target: 변경할 URL2,
      changeOrigin: true
    }
  }
})

사용할때는 이렇게 사용해주자.

await this.$axios
  .post("/api의 URL", {
    //서버에 보낼 파라미터
  })
  .then(res => {
    //필요한 처리
  })

 

2. cors 오류는 해결됏는데 404 오류가 뜨는 경우

axios로 proxy 설정을 통해 cors 오류는 안뜨게 됐는데 404가 뜰 경우는 URL이 이상하게 적용됐을 수 있다.

프록시를 적용할 URL인 target과 사용할때 넣어줄 api의 url을 맨 뒤 혹은 앞에 /를 빼거나 넣는식으로 무지성 노가다를 통해 테스트해보자. 개발자라면 극혐할 수 있는 노가다작업이지만..케이스가 그리 많지 않으니 금방 확인할수있을거다.

 

위에 선 결론에서 첫번째 케이스는 axios로 cors 문제를 해결하는데에 있어 제일 흔한 방법(나도 사용함)은 프록시를 추가해주는것이다. 문제는 이놈의 프록시가 적용이 됏는지 안됏는지 확인 할방법이 없다.(정확히는 내가 못찾음) 때문에 프록시로도 안되나..? 라는 생각을 하기 마련인데 이 경우에는 프록시가 제대로 적용이 안된 케이스일 수 있다.

물론 위 방법대로 axios에 세팅하는것 말고 vue.config.js 파일에서 devServer에 프록시 세팅을 해야하는 경우도 있다.

axios에 세팅하고도 안되면 vue.config.js에 세팅하는 방법을 적용해보자.

 

두번쨰 케이스는 기본적으로 cors때문에 프록시 세팅을 하고나면 404 에러가 나는 경우가 있는데.

한마디로 요약하면 프록시를 설정할 URL이 이상하게 완성되었기 때문이다.

아래 코드처럼 프록시 세팅을 했다고 가정하자.

module.exports = {
devServer: {
    proxy: {
        '/V1': {
            target: 'http://localhost:8888',
            changeOrigin: true
        },
        '/V2': {
            target: 'https://loclhost:4437',
            changeOrigin: true
        },

    }
}

(링크로만 때우려니 너무 날로먹는거같아 vue.config.js 파일에 세팅하는 예제코드도 가져와봄 ㅎ;)

 

위 예제코드가 잘 동작해서 404 error 없이 무사히 지나간다면 참 좋겠지만, 404를 만났다면 위 프록시가 적용은 됐는데 

프록시가 적용된 url이 'http://localhost:8888V1/list' 혹은 'http://localhost:8888/list'  이런식으로 적용될 수 있다는거다. 당연히 멀쩡한 서버라면 위와 같은 URL의 API를 만들리는 없을테니 404가 뜨게 되는것이다.

그러므로 위 세팅에서 target에 적용할 URL을 http://localhost:8888/ 혹은 http://localhost:8888/V1 이런식으로 바꿔보면서 적용해보면 404가 아닌 다른 에러메시지를 보거나 정상동작하는것을 볼 수 있을것이다. 

 

내가 경험한 케이스가 위 두가지뿐이라 두가지만 작성했지만, 다른 방법들이 더 존재할수있고 해결법 역시도 그와 비례해서 많은 방법이 존재할것이다. 너무 맹신하진 말고 한번정도는 시도해볼법한 해결법이라고 생각하면 되겠다.

 

끗!