如何通过Nuxt配置禁用pages目录路由的非GET HTTP方法？

默认情况下Nuxt3的页面路由确实会接受所有HTTP方法，下面是几种仅用Nuxt配置实现限制的方式：

方法1：全局服务器中间件（批量限制所有页面） #

创建全局中间件拦截所有非API的页面路由，仅允许GET请求：

1. 在项目根目录新建 server/middleware/allow-get-only.ts 文件
2. 写入代码：

export default defineEventHandler((event) => {
  // 过滤掉API路由，只处理页面路由
  const isPageRoute = event.node.req.url?.startsWith('/') && !event.node.req.url?.startsWith('/api')
  if (isPageRoute && event.node.req.method !== 'GET') {
    setResponseStatus(event, 405)
    return createError({
      statusCode: 405,
      statusMessage: 'Method Not Allowed',
      message: '页面路由仅支持GET请求'
    })
  }
})

启动项目后，所有页面路由的POST/DELETE等请求都会返回405错误。

方法2：单个页面单独配置 #

如果只需要限制特定页面，在目标页面组件中添加服务器端校验逻辑：

以pages/route1.vue为例：

<script setup>
definePageMeta({
  server: true // 强制页面在服务器端处理
})

if (process.server) {
  const event = useRequestEvent()
  if (event?.node.req.method !== 'GET') {
    throw createError({
      statusCode: 405,
      statusMessage: 'Method Not Allowed'
    })
  }
}
</script>

这样只有该页面会拦截非GET请求，其他页面不受影响。

方法3：路由规则配置（Nuxt 3.9+） #

如果你的Nuxt版本在3.9及以上，可以直接在nuxt.config.ts中配置路由规则：

export default defineNuxtConfig({
  routeRules: {
    // 对所有页面路由生效
    '/*': {
      method: ['GET'],
      headers: {
        'Allow': 'GET'
      }
    }
  }
})

这个配置会自动拦截非GET请求，返回405错误，同时响应头会带上Allow: GET提示允许的方法。

测试验证：

• 执行 curl 'http://localhost:3000/route1' 可正常获取页面内容
• 执行 curl --request POST 'http://localhost:3000/route1' 会收到405错误响应

内容的提问来源于stack exchange，提问作者Yusuf