v3.17

useResponseHeader

Source
使用 useResponseHeader 设置服务器响应标头。
此可组合项在 Nuxt v3.14+ 版本中可用。

你可以使用内置的 useResponseHeader 可组合项在页面、组件和插件中设置任何服务器响应标头。

¥You can use the built-in useResponseHeader composable to set any server response header within your pages, components, and plugins.

// Set the a custom response header
const header = useResponseHeader('X-My-Header');
header.value = 'my-value';

示例

¥Example

我们可以使用 useResponseHeader 轻松地为每个页面设置响应头。

¥We can use useResponseHeader to easily set a response header on a per-page basis.

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 中间件 中使用 useResponseHeader 为所有页面设置响应头。

¥We can use useResponseHeader for example in Nuxt middleware to set a response header for all pages.

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