-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
서버사이드 랜더링 적용시 API 서버 연동에 대한 문의 드립니다.
20.07.16 18:07 작성 조회수 610
0
실무에 nuxt.js를 사용해보기 위해 강의를 듣고 있습니다.
앞부분 듣는 중이라 개념이 잘 안잡혀서 질문 드립니다.
예를 들어 아래 처럼 두개의 서버가 있다고 가정할때
웹서버 : 1번 서버(IP: 11.11.11.111)
API서버 : 2번 서버(IP: 22.22.22.222)
2(API)서버에서는 1서버의 IP만 허용하고 다른 접근은 방화벽으로 막혀있습니다.
이전 개발 방식(jsp, asp.net mvc 등)은 서버사이드에서 API를 호출하여
1-->2 서버로 접근 가능 (출발지가 1 IP 이기 때문에)
vue.js 경우
1에서 API 호출되는 것이 아니라 클라이언트 브라우저 --> 2로 접근 하는 것으로 생각됩니다.
그러면 방화벽에서 막혀서 접근이 안될꺼라 예상됩니다.
(출발지가 무작위 즉, 1 IP가 아니기 때문에)
nuxt.js의 경우는 1-->2로 접근이 가능하게 설계가 가능한 구조인가요?
실무에서 많이 접하게 될 환경인데 개념이 부족해서
nuxt.js에서 개발이 가능한지 궁금합니다.
감사합니다.
답변을 작성해보세요.
0
조현영
지식공유자2020.08.04
1003:/api로 요청가는게 프록시입니다. 그럼 알아서 다시 proxy설정에 적어준 주소로 요청이 전달돼요. proxy 설정을 어떻게 하셨나요.
0
Sun.ahn
질문자2020.08.04
*호출
this.$axios.get(`/feach`)
*nuxt.config.js
axios: {
baseURL: process.env.NODE_ENV === 'production' ? 'https://api.nodebird.com/api' : 'http://localhost:1003/api',
},
이렇게 바꿔서 호출해도 http://localhost:1003/api... 으로 request가 갑니다.
proxy가 안타는것 같습니다. 혹시 다른 설정도 필요하나요?
계속 문의를 드려서 죄송스럽습니다. ㅜㅜ
0
조현영
지식공유자2020.08.04
프록시를 적용하면 요청을 모두 localhost:포트/api로 보내셔야 합니다. 그러면 이 프론트서버에서 백엔드주소로 대신 요청을 보내줍니다.
0
Sun.ahn
질문자2020.08.04
안녕하세요. 강사님 도움으로 프로토타입 프로젝트를 진행하고 있습니다.
proxy관련하여 다시 문의 드립니다.
아래처럼 nuxt.config.js 를 수정하였습니다.
api를 호출하면 http://api.dev.com/api/....... 처럼 axios만 타고 proxy는 적용이 안되고 있습니다.
혹시 제가 놓치고 있는 부분은 무엇일까요?
도움 부탁드립니다.
감사합니다.
--nuxt.config.js--
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy',
],
axios: {
baseURL: process.env.NODE_ENV === 'production' ? 'https://api.nodebird.com/api' : 'http://api.dev.com/api',
},
proxy: {
// Simple proxy
'/api': 'http://proxy.com',
},
0
0
0
0
0
조현영
지식공유자2020.07.16
생각하고계신 개념이 맞습니다.
그렇다면 브라우저->1->2 이렇게 요청이 가게 햐야하는데 이 때 nuxt proxy 패키지가 있습니다.
https://github.com/nuxt-community/proxy-module#readme
nuxt.config.js에 설정하신 뒤 브라우저에서는 모두 프론트서버를 가리키게(1번 서버) 요청 주소를 바꿔주세요.
답변 9