如何使用Nuxt 3中间件强制SSL（HTTPS）重定向？

你的代码存在几个关键问题，导致强制HTTPS逻辑可能失效或不符合Nuxt3的最佳实践，以下是修正后的实现及问题说明：

原代码问题分析 #

• 依赖已废弃的ssrContext：Nuxt3中nuxtApp.ssrContext已被官方标记为废弃，直接读取可能导致后续版本兼容性问题。
• 未适配本地开发环境：本地开发通常使用HTTP，强制HTTPS会阻断调试流程。
• 协议头获取逻辑单一：部分部署环境（如反向代理）可能使用不同的协议头字段，仅读取x-forwarded-proto会漏掉其他场景。
• 重定向实现不够规范：服务端场景下直接使用navigateTo虽然能工作，但更推荐用请求事件的redirect方法发送标准HTTP重定向响应。

修正后的代码 #

export default defineNuxtRouteMiddleware((to) => {
  if (process.server) {
    // 本地开发环境跳过HTTPS强制逻辑
    if (process.env.NODE_ENV === 'development') return

    const event = useRequestEvent()
    if (!event) return

    // 兼容不同环境的协议头获取
    const protocol = event.node.req.headers['x-forwarded-proto'] || event.node.req.protocol
    const host = event.node.req.headers.host
    // 使用路由的fullPath确保路径准确性
    const url = to.fullPath

    if (protocol === 'http') {
      const httpsUrl = `https://${host}${url}`
      // 发送301永久重定向，利于SEO
      return event.redirect(301, httpsUrl)
    }
  }
})

关键修改说明 #

• 替换ssrContext为useRequestEvent()：这是Nuxt3官方推荐的服务端请求事件获取方式，确保API兼容性。
• 新增本地开发判断：避免在开发环境中强制HTTPS，不影响日常调试。
• 协议头兼容处理：同时读取x-forwarded-proto（反向代理场景）和req.protocol（直接Node服务场景），覆盖更多部署情况。
• 使用to.fullPath：路由对象的fullPath包含完整的路由路径和查询参数，比req.url更可靠。
• 改用event.redirect()：发送标准的301永久重定向响应，符合HTTP规范，对搜索引擎更友好。

内容的提问来源于stack exchange，提问作者O-mkar