VueJs에서 CORS 문제를 해결하는 방법

웹 애플리케이션은 종종 외부 소스 또는 도메인의 리소스에 의존합니다. 예를 들어 웹사이트는 다른 사이트에서 호스팅되는 이미지를 표시할 수 있습니다. 이미지 외에도 웹 애플리케이션은 외부 API에서 JSON 형식 데이터를 가져올 수 있습니다.

그러나 웹사이트 간에 리소스를 공유하는 것이 항상 순조롭게 진행되는 것은 아닙니다. JavaScript에서 다른 사이트로 HTTP 요청을 한 경우 CORS 오류를 본 적이 있을 것입니다.


이 블로그에서는 CORS 정책이 무엇이며 CORS 문제를 해결하는 방법에 대해 설명하겠습니다.

시작하자...

CORS란 무엇입니까?

CORS의 전체 의미는 Cross-Origin Resource Sharing입니다. CORS는 Chrome, Firefox, Safari 및 Edge와 같은 최신 웹 브라우저에서 찾을 수 있는 메커니즘입니다. 도메인 A가 명시적 허가 없이 도메인 B의 리소스에 액세스하지 못하도록 합니다.

이 문제를 재현하기 위해 간단한 golang 기반 백엔드 프로젝트를 개발했으며 API를 VueJs 프런트엔드 코드와 통합했습니다.

Vue는 포트 8080에서 수신 대기하고 프런트엔드를 제공하는 간단한 웹 서버를 가동합니다. 이는 개발을 쉽게 하기에는 좋지만 API를 호출할 때 문제가 발생합니다.

http://localhost:8080 페이지를 열어 보겠습니다.


API 호출 브라우저를 트리거하는 동안 CORS 오류가 발생하는 것을 볼 수 있습니다. 이는 http://localhost:8080과 http://localhost:3000이 서로 다른 도메인으로 간주되어 CORS 정책이 적용되기 때문입니다.

CORS 오류 해결 방법

이 CORS 문제를 두 가지 방법으로 해결할 수 있습니다.

1) 백엔드 서버에서 CORS 요청 허용

Access-Control-Allow-Origin 헤더를 사용하여 API를 사용할 수 있는 오리진을 지정할 수 있습니다.

Vue 앱에서 호출할 수 있도록 http://localhost:8080 또는 '*'로 설정할 수 있습니다.

func respondWithJson(w http.ResponseWriter, code int, payload interface{}) {
    response, _ := json.Marshal(payload)
    w.Header().Set("Content-Type", "application/json")
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.WriteHeader(code)
    w.Write(response)
}

2) VueJs에서 개발 프록시 설정

개발 중에 백엔드 서버가 프런트엔드 서버와 다른 포트에서 실행되는 것을 자주 볼 수 있습니다.

프런트엔드 서버가 localhost:8080에서 실행되고 백엔드 서버가 localhost:3000에서 실행되는 예제에서도 마찬가지입니다.

이 프록시 시스템을 설정하기 위해 Vue 프로젝트의 루트에 vue.config.js 파일을 만들 수 있습니다.

module.exports = {
  devServer: {
    proxy: {
      '^/users': {
        target: 'http://localhost:3000/',
        ws: true,
        changeOrigin: true
      },
    }
  }
}

그런 다음 Axios 호출에서 백엔드 URL도 변경해야 합니다. 즉, 백엔드 URL을 제공하는 대신 도메인을 제거하거나 프런트엔드 도메인을 제공해야 합니다.

listUsers(){
   var url = "/users";
   return axios({
      url: url,
      method: 'GET',
   }).then(result => {
      this.model = result.data;
      this.$emit('listUsers', this.model);
      return result;
   }).catch(error => {
      console.log(error);
      throw error;
   });
},

여기에서는 API 호출을 하는 동안 도메인을 제거했습니다.

다시 해봅시다!



이제 브라우저가 API에 액세스할 수 있음을 알 수 있습니다.