Nuxt2中如何将CloudFront请求头值传递至页面或组件

下面是几种经过验证的高效方案，按需选择：

方案1：通过Server Middleware注入上下文（推荐） #

这种方式能在服务端统一处理请求头，把countryCode挂载到请求上下文，页面和组件都能便捷访问：

1. 创建服务端中间件文件 server-middleware/country-handler.js：

export default function (req, res, next) {
  // 从CloudFront请求头获取国家码
  const countryCode = req.header('cloudfront-viewer-country')?.toUpperCase()
  
  // 校验：确保是合法的ISO 3166-1 alpha-2格式
  const validCountryCodes = new Set(['CN', 'US', 'JP', 'GB']) // 按需扩展合法列表
  req.countryCode = validCountryCodes.has(countryCode) ? countryCode : 'UNKNOWN'
  
  next()
}

2. 在nuxt.config.js中注册这个中间件：

export default {
  serverMiddleware: [
    '~/server-middleware/country-handler.js'
  ]
}

3. 在页面中通过asyncData获取：

export default {
  async asyncData({ req }) {
    // SSR环境下直接从req拿处理后的国家码
    const countryCode = process.server ? req.countryCode : null
    return { countryCode }
  }
}

4. 在组件中访问：

export default {
  computed: {
    countryCode() {
      return this.$nuxt.context.req?.countryCode || 'UNKNOWN'
    }
  }
}

方案2：通过Nuxt插件注入全局实例 #

如果需要在所有页面/组件中快速访问countryCode，可以用插件注入到Vue实例，同时处理客户端 hydration 不匹配问题：

1. 创建插件文件 plugins/country-code.js：

export default ({ app, req, isServer }) => {
  if (isServer) {
    const countryCode = req.header('cloudfront-viewer-country')?.toUpperCase()
    // 校验逻辑同方案1
    const validCountryCodes = new Set(['CN', 'US', 'JP', 'GB'])
    const validatedCode = validCountryCodes.has(countryCode) ? countryCode : 'UNKNOWN'
    
    // 注入到Vue实例，服务端和客户端都能访问
    app.$countryCode = validatedCode
    // 存入store避免客户端 hydration 问题
    app.store.commit('setCountryCode', validatedCode)
  } else {
    // 客户端从store取服务端传入的值
    app.$countryCode = app.store.state.countryCode
  }
}

2. 在nuxt.config.js中注册插件：

export default {
  plugins: [
    { src: '~/plugins/country-code.js', mode: 'server' }
  ]
}

3. 对应的Vuex store（若使用）：

// store/index.js
export const state = () => ({
  countryCode: 'UNKNOWN'
})

export const mutations = {
  setCountryCode(state, code) {
    state.countryCode = code
  }
}

4. 在页面/组件中直接使用：

// 页面逻辑
export default {
  mounted() {
    console.log(this.$countryCode)
  }
}

// 组件模板
<template>
  <div>当前地区：{{ $countryCode }}</div>
</template>

方案3：通过自定义Server入口传递（适合自定义Lambda部署场景） #

如果你的Nuxt是通过自定义Lambda入口部署的，可以直接在入口文件中把countryCode附加到Nuxt上下文：

// server/index.js（自定义入口）
const { Nuxt, Builder } = require('nuxt')
const express = require('express')
const app = express()

async function start() {
  const config = require('../nuxt.config.js')
  config.dev = process.env.NODE_ENV !== 'production'
  
  const nuxt = new Nuxt(config)
  const { host, port } = nuxt.options.server

  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  // 处理请求头并附加到上下文
  app.use((req, res, next) => {
    const countryCode = req.header('cloudfront-viewer-country')?.toUpperCase()
    const validCountryCodes = new Set(['CN', 'US', 'JP', 'GB'])
    req.countryCode = validCountryCodes.has(countryCode) ? countryCode : 'UNKNOWN'
    next()
  })

  app.use(nuxt.render)
  app.listen(port, host)
}

start()

校验注意事项 #

• 始终对cloudfront-viewer-country的值做校验，请求头可能被篡改或返回非标准值（比如XX代表未知地区）
• 可维护合法国家码集合，或用第三方工具库做格式校验
• 优先在服务端完成校验，避免非法值传递到客户端

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