front-end 와 back-end 를 따로 구축하는 경우
proxy issue가 있다.
axios 를 이용하여 기존 서비스에 로그인을 시도했는데
parameter 수신이 되지 않았다.
전송자체는 동일한 값이 전송되었는데 수신 url에 대한 호출은 되나 param 정보가 없었다.
이유는 (일주일 정도 삽질했나?? ㅠㅠ)
크로스 도메인 이슈 때문이다.
| 스크립트가 실행되는 페이지와 비동기 호출 시 주소의 프로토콜, 호스트, 포트가 같아야 함. |
즉 front-end 실행 포트가 3000번이고
back-end 실행 포트가 8000번인 경우 위 경우에 해당되기 때문에
proxy 설정을 해야 정상적으로 처리가 가능하다.
먼저 모듈 설치
npm i @nuxtjs/axios
npm i @nuxtjs/proxy
그 다음 nuxt.config.js 설정
| module.exports = { modules: [ '@nuxtjs/axios' ], axios: { proxy: true // proxy 사용 }, proxy: { '/prefix-url': 'proxy-url' // proxy url } } |
나의 경우 로그인만 Test 했으므로 nuxt.config.js 에 추가
proxy: { '/login/': 'http://localhost:8000' },
호출하는 login.vue에서
<input v-model="userid" type="text" class="input" name="userid"/>
<input v-model="password" type=password" class="input" name="password"/>
// login function
const frm = new FormData()
frm.append('userid', this.userid) // model로 연결되어 있으므로 this.userid
frm.append('password', this.password) // model로 연결되어 있으므로 this.password
this.$axios.post(`login/proc`, frm)
수신하는 back-end 의 경로가
http://localhost:8000/login/proc
proxy에 /login 설정이 되어 있으므로
proxy에서 "/":"localhost:8000" 으로 하면 proxy로 바로 redirect 되므로 경로가 있어야 함.
하지만 proxy로 하는경우 경로 구별을 위해
/api/ 라는 경로를 주어 분리하는 용도로 사용해 봐야겠음.
