NuxtServerInit 삽질 기록

nuxtServerInit 내에서 API 조회를 호출했을 때 왜 request header 에 왜 clientIP가 넘어가는가?

결론: nuxt/axios 설정이 있음

• proxyHeaders - 설정값이 true일 때 SSR Context 에서 클라이언트 요청 헤더를 axios 요청의 기본 헤더로 설정 (기본값: true)

문제의 발단

요청 IP 를 통해 특정 값을 판단하여 리턴하는 [getDataByIp API] 가 있다.

[getDataByIp API]는 IP를 파라미터로 받고, IP 파라미터가 없을 경우 요청 헤더로부터 IP정보를 획득한다.

nuxtServerInit 에서 [getDataByIp API]를 호출하도록 처리하기 위해 처음엔 다음과 같이 작성했다.

nuxtServerInit(store, context) {
			const ip = context.req.headers['x-forwarded-for']  // 나의 공인 IP
			const res = await this.$API.aGroup.getAPI(ip)
      console.log(res.data) // {ip:"나의 공인 IP"}
}

• 위와 같이 context 로부터 client IP를 가져와 API 호출 시 파라미터로 전달하기

• 그런데 이상한일이 있었다. getAPI 호출 시 IP를 파라미터로 넣지 않아도 나의 공인 IP 가 응답이 되었다.

  • 그말은 요청 헤더에 서버 IP가 아닌 Client의 IP가 실렸다는 말인데.. 왜그럴까?

• 또, 아래 코드와 같이 context 의 axios 를 사용하여 호출할 때와 axios 를 새로 import 하여 호출할 때 결과가 달랐다. (첫번째 코드 블럭의 $API 는 context의 $axios 를 사용하여 만들어둔 instance 를 사용한다.)

import axios from 'axios';

nuxtServerInit(store, context) {
			const contextAxiosRes = await context.$axios({
				method: 'get',
        url: '${path}/getDataByIp',
			})
			const newAxiosRes = await axios({
				method: 'get',
        url: '${path}/getDataByIp',
			})
			console.log(contextAxiosRes.data) // {ip:"나의 공인 IP"}
      console.log(newAxiosRes.data) // {ip:"Front 서버 IP"}
}

따라서 프로젝트에서 사용중인 @nuxtjs/axios 문서를 살펴보았는데 여기서 관련 설정을 발견했다.

proxyHeaders

• default: true
• SSR 컨텍스트에서 클라이언트 요청 헤더를 기본 헤더로 설정하도록 하는 값으로, SSR 에서 요청할 때와 클라이언트에서 요청할 때 모두 일관된 요청을 하기 위한 설정이다.

proxyHeadersIgnore

• default: ['accept', 'host', 'x-forwarded-host', 'x-forwarded-port', 'x-forwarded-proto', 'cf-ray', 'cf-connecting-ip', 'content-length', 'content-md5', 'content-type'])
• proxyHeaders 설정이 true 일 때, SSR에서 백엔드로 보내는 요청 헤더에서 원하지 않는 요청 헤더값을 제거하는 설정이다.