[Nuxt3] proxy 설정 (다중 설정)

Nuxt3 프로젝트에서 여러 도메인의 api를 호출할 때 설정

/server/middleware/proxy.ts

export default defineEventHandler(async (event) => {
  let target

  // 요청 URL에 따라 target URL 설정
  if (event.req.url?.startsWith('/api')) {
	//api url: https://api도메인1.com/api/test/apiData
    target = new URL(event.req.url.replace('/api', ''), 'https://api도메인1.com')
  } else if (event.req.url?.startsWith('/branapi')) {
  	//api url: https://api도메인2.com/branapi/test/apiData
    target = new URL(event.req.url.replace('/branapi', ''), 'https://api도메인2.com')
  } else {
    // 해당되는 API 경로가 없으면 처리하지 않음
    return
  }

  // `proxyRequest` 함수를 호출하기 전에 target URL이 정확한지 확인
  console.log('Proxying to:', target.toString())

  return await proxyRequest(event, target.toString())
})

 

/composables/useApiData.ts

export const useApiData = async (url) => {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ key: 'value' })
    })

    if (!response.ok) {
      throw new Error('Network response was not ok')
    }

    const data = await response.json()
    console.log('API 호출 완료:', data)
    return data // 데이터 반환
  } catch (error) {
    console.error('API call failed:', error)
    throw error // 에러를 던져서 컴포넌트에서 처리할 수 있게 함
  }
}

 

 

/components/list.vue

<script setup lang="ts">
onMounted(async () => {
  try {
	//인자값에 api endpoint 입력 - proxy에 설정한 양식 참고
    const data = await useApiData('/branapi/test/apiData')
    console.log('Components에서 호출 === ', datao)
  } catch (error) {
    // 에러 처리 로직
  }
})

</script>