nuxt logo

문서 번역(비공식)

useResponseHeader

useResponseHeader를 사용하여 서버 응답 헤더를 설정합니다.

이 컴포저블은 Nuxt v3.14+에서 사용할 수 있습니다.

내장된 useResponseHeader 컴포저블을 사용하여 페이지, 컴포넌트 및 플러그인 내에서 서버 응답 헤더를 설정할 수 있습니다.

// 사용자 정의 응답 헤더 설정
const header = useResponseHeader('X-My-Header');
header.value = 'my-value';

예제

useResponseHeader를 사용하여 페이지별로 쉽게 응답 헤더를 설정할 수 있습니다.

pages/test.vue
<script setup>
// pages/test.vue
const header = useResponseHeader('X-My-Header');
header.value = 'my-value';
</script>

<template>
  <h1>사용자 정의 헤더가 있는 테스트 페이지</h1>
  <p>이 "/test" 페이지에 대한 서버의 응답에는 사용자 정의 "X-My-Header" 헤더가 포함됩니다.</p>
</template>

Nuxt 미들웨어에서 모든 페이지에 대한 응답 헤더를 설정하기 위해 useResponseHeader를 사용할 수 있습니다.

middleware/my-header-middleware.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const header = useResponseHeader('X-My-Always-Header');
  header.value = `I'm Always here!`;
});