결론: 프록시를 사용해야한다.
프록시
프록시(Proxy)는 한마디로 설명하면, 클라이언트와 서버 간의 중간 매개체입며, 클라이언트(사용자)가 서버에 직접 연결하는 대신, 프록시를 통해 연결하도록 하는 시스템 또는 서버를 가리킨다.
관리자페이지를 작업 중 이다. 화면(frontend)은 vue를 사용하고 api는 스프링부링부트를 사용하려 한다.
이유는 vue와 스프링부트가 각각 프론트엔드, 백엔드개발에 특화되어있기 때문이다.
login을 하려고 frontend login페이지에서 backend api로 호출해야만 하는 상황이다.
즉 frontend localhost:8080에서 localhost:8082/api/login을 호출하려고 한다.
1. Vue.js 설정 (vue.config.js):
const {defineConfig} = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, // 단일 파일 저장시 linting 하지 않음
// outputDir: process.env.VUE_APP_DEPLOY == "production" ? path.resolve(__dirname, "/opt/www/xxx-adm") : path.resolve(__dirname, "../xxx-admin/dist"),
devServer: {
proxy: 'http://localhost:8082'
}
});
2. Spring Boot 설정 (application.properties):
server.port = 8082
server.servlet.context-path = /api
이렇게 함으로써
👉 1번: 코드에서 devServer 속성을 통해 프록시를 설정함으로 개발서버는 /api로 시작하는 모든 요청을 http://localhost:8082로 프록시된다.
👉2번: 8082port의 backend의 기본경로를 /api로 설정한다.
🚀 따라서, Vue.js 애플리케이션에서 /api로 시작하는 엔드포인트를 호출하면 이는 프록시 설정을 통해 http://localhost:8082로 전달될 것 이다.
예를 들어, Vue.js에서 /api/someEndpoint를 호출하면 실제로는 http://localhost:8082/api/someEndpoint로 백엔드 전달