透過 100 多個訣竅的集合來學習 Nuxt!

useResponseHeader

使用 useResponseHeader 設定伺服器回應標頭。
這個 composable 在 Nuxt v3.14+ 版本中可用。

您可以使用內建的 useResponseHeader composable 在您的頁面、元件和外掛程式中設定任何伺服器回應標頭。

// Set the a custom response header
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>Test page with custom header</h1>
  <p>The response from the server for this "/test" page will have a custom "X-My-Header" header.</p>
</template>

例如,我們可以在 Nuxt 中介層 (middleware) 中使用 useResponseHeader 為所有頁面設定回應標頭。

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