Nuxt.js服务端渲染获取主机名及匹配API配置方法问询

一、SSR 场景下获取页面主机名 #

不同的Nuxt.js钩子/上下文里，获取主机名的方式略有不同，给你几个常用场景的具体实现：

• 在 asyncData 或 fetch 钩子中：
  这两个钩子在SSR阶段会接收context参数，直接从context.req.headers.host就能拿到主机名，同时可以兼容前端渲染场景：

  export default {
    async asyncData(context) {
      // 区分服务端/前端环境获取主机名
      const hostname = process.server 
        ? context.req.headers.host 
        : window.location.hostname;
      console.log('当前访问的主机名:', hostname);
      return { hostname };
    }
  }
  

• 在 Vuex 的 nuxtServerInit 中：
  如果你需要在全局状态初始化时获取主机名，同样从context.req.headers.host提取：

  // store/index.js
  export const actions = {
    async nuxtServerInit({ commit }, context) {
      if (process.server) {
        const hostname = context.req.headers.host;
        commit('SET_CURRENT_HOST', hostname);
      }
    }
  }
  

• 在自定义 Server Middleware 中：
  编写服务端中间件时，直接从Node.js的请求对象中获取：

  // server-middleware/logger.js
  export default function(req, res, next) {
    const hostname = req.headers.host;
    console.log('服务端捕获到访问主机:', hostname);
    next();
  }
  

二、根据主机名匹配对应的API配置 #

针对你给出的多域名配置列表，我们可以封装一个通用工具，同时兼容SSR和前端渲染场景：

1. 先统一管理配置文件 #

在项目中新建配置文件，集中存放多域名API映射：

// config/api-mappings.js
export const apiConfigs = [
  { front_host: 'local-1.domain.com', backend_api: 'api-1.domain.com' },
  { front_host: 'local-2.domain.com', backend_api: 'api-2.domain.com' }
];

2. 封装全局匹配函数 #

通过Nuxt插件将匹配函数注入全局，方便各处调用：

// plugins/api-config.js
import { apiConfigs } from '@/config/api-mappings';

export default ({ app }, inject) => {
  const getMatchedApiConfig = () => {
    let hostname;
    // 区分服务端/前端环境获取主机名
    if (process.server) {
      hostname = app.context.req.headers.host;
    } else {
      hostname = window.location.hostname;
    }

    // 清理主机名（去掉可能带的端口号，比如 local-1.domain.com:3000）
    const cleanHost = hostname.split(':')[0];
    // 匹配对应的API配置
    const matched = apiConfigs.find(item => item.front_host === cleanHost);
    
    // 兜底处理：没有匹配到则返回第一个配置，你也可以根据需求抛出提示
    return matched || apiConfigs[0];
  };

  // 将函数注入到Vue实例、context、store中，全局可用
  inject('getApiConfig', getMatchedApiConfig);
};

记得在nuxt.config.js中注册这个插件：

export default {
  plugins: [
    '@/plugins/api-config.js'
  ]
}

3. 实际使用示例 #

• 在页面的asyncData中调用：

export default {
  async asyncData({ $getApiConfig }) {
    const currentApiConfig = $getApiConfig();
    console.log('当前匹配的API:', currentApiConfig.backend_api);
    // 用匹配到的域名请求接口
    const response = await fetch(`https://${currentApiConfig.backend_api}/user/list`);
    const data = await response.json();
    return { userList: data };
  }
}

• 在组件的前端渲染阶段调用：

export default {
  mounted() {
    const apiConfig = this.$getApiConfig();
    console.log('前端渲染时的API配置:', apiConfig);
  }
}

小提醒 #

• 一定要处理端口号：本地开发或特殊部署场景下，主机名可能带有端口（如localhost:3000），通过split(':')[0]清理后再匹配更准确。
• 兜底逻辑不能少：避免因域名未匹配到导致页面报错，返回默认配置或给出友好提示会更稳妥。

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