Nuxt.js服务端如何设置Origin请求头？多域名场景解决方案

1. 在nuxtServerInit中手动设置Origin头 #

nuxtServerInit的上下文参数包含req对象，可从中获取当前请求的域名和协议，手动构造Origin头添加到axios请求中：

async nuxtServerInit(_vuexContext, { $accessor, error, req }: Context) {
  try {
    // 获取真实协议（Nginx反向代理时需配置x-forwarded-proto传递）
    const protocol = req.headers['x-forwarded-proto'] || 'http';
    // 构造完整Origin
    const origin = `${protocol}://${req.headers.host}`;
    // 请求时携带Origin头
    const config = await this.$axios.$get('/v1/config/', {
      headers: {
        Origin: origin
      }
    });
    console.log(config);
  } catch (e: any) {
    console.error(e);
    return error({ statusCode: 500, message: e.message });
  }
}

注意：若使用Nginx反向代理，需在Nginx配置中添加以下指令，确保Nuxt能拿到真实的协议和域名：

proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $host;

2. 全局配置服务端axios拦截器 #

如果多个服务端请求都需要携带Origin头，可创建服务端专属的axios插件，通过拦截器自动添加：

1. 创建plugins/axios.server.ts：

export default function ({ $axios, req }) {
  if (process.server) {
    const protocol = req.headers['x-forwarded-proto'] || 'http';
    const origin = `${protocol}://${req.headers.host}`;
    $axios.interceptors.request.use(config => {
      config.headers.Origin = origin;
      return config;
    });
  }
}

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

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/axios.server.ts', mode: 'server' }
  ]
})

3. 替代方案：传递域名参数而非Origin头 #

若后端支持，可直接将当前域名作为请求参数传递，无需依赖Origin头：

async nuxtServerInit(_vuexContext, { $accessor, error, req }: Context) {
  try {
    const config = await this.$axios.$get('/v1/config/', {
      params: {
        domain: req.headers.host
      }
    });
    console.log(config);
  } catch (e: any) {
    console.error(e);
    return error({ statusCode: 500, message: e.message });
  }
}

后端只需根据domain参数返回对应数据即可，这种方式更直接，避免了Origin头的相关限制。

内容的提问来源于stack exchange，提问作者Amir Hosein Salimi