[Nuxt.js] CORS 우회방법 #Proxy

문제⛔

• Front End(Nuxt.js)와 Back End(Spring boot)를 나누어 개발하다 보면 API 호출 시 CORS 정책에 따른 API 호출 불가 메세지가 발생합니다. 개발 환경에서 이를 우회하기 위한 설정을 알아보겠습니다.
• Node.js 서버(localhost:3000)
• Tomcat 서버(localhost:8080)

CORS란❓

• CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 발생하는 보안 상의 제약을 우회하기 위해 도입된 웹 브라우저의 정책입니다. 웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)를 따르며, 이 정책은 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 자원에 접근하는 것을 제한합니다. 출처는 프로토콜, 호스트, 포트 번호로 정의됩니다.
• CORS는 웹 서버와 웹 브라우저 간의 통신을 위한 표준 규약으로, 서버는 응답 헤더를 통해 브라우저에게 접근 권한을 부여합니다. 웹 브라우저는 이 헤더를 확인하여 요청의 유효성을 판단하고, 필요한 경우 자원에 대한 접근을 허용합니다. 이를 통해 다른 도메인이나 포트에서 제공되는 자원에 대한 안전한 교환을 가능하게 합니다.

해결방법❗

• Proxy 설정을 통해 API 서버로 요청을 전달하기 전에 요청 주소를 변경하거나 헤더를 수정합니다. 이를 통해 클라이언트는 API 요청을 보낼 때 Nuxt.js 개발 서버에서 요청 주소를 변경해 해당 요청을 받아 API 서버로 전달합니다. 이를 통해 클라이언트는 실제 API 서버 대신 개발 서버로부터 응답을 받게 되며, 동일 출처 정책을 준수하면서 개발 중에도 API와의 통신이 가능해집니다.
• Nuxt.js의 Proxy 설정은 nuxt.config.js 파일에서 proxy 속성을 통해 구성할 수 있습니다. 이 설정에서는 프록시할 요청 경로와 해당 요청을 어떤 주소로 전달할지를 설정합니다.

nuxt.config.js

export default {
    // Axios module configuration: https://go.nuxtjs.dev/config-axios  
    axios: {  
        // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308  
        baseURL: '/',  
        proxy:true  
    },  
    proxy: {  
        '/api': {  
            target: 'http://localhost:8080',  
        changeOrigin: true  
        },
    }
}