NextJS SSR场景下如何为Axios全局添加自定义请求头（getServerSideProps）

当然可以全局添加请求头，你之前尝试修改context.req.headers无效的原因是：context.req是Next.js接收客户端请求的对象，修改它不会影响Axios向外发送的请求头。下面是两种可靠的全局实现方式：

方法1：创建全局Axios实例并添加请求拦截器 #

这是最常用的全局配置方案，只需初始化一次，所有请求自动带上指定头。

1. 创建一个单独的Axios实例文件（比如utils/axios.js）：

import axios from 'axios';

// 替换为你的API基础地址
const BASE_URL = 'https://your-api-domain.com';

// 创建全局Axios实例
const apiClient = axios.create({
  baseURL: BASE_URL,
});

// 添加请求拦截器，全局注入请求头
apiClient.interceptors.request.use(
  (config) => {
    // 给所有请求添加X-FOO头
    config.headers['X-FOO'] = 'BAR';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default apiClient;

2. 在getServerSideProps中直接使用这个实例：

import apiClient from '../utils/axios';
import type { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async () => {
  try {
    // 自动带上X-FOO头
    const { data } = await apiClient.get('/path');
    return {
      props: { data },
    };
  } catch (err) {
    // 按需处理错误
    return {
      props: {},
    };
  }
};

方法2：在getServerSideProps中全局设置默认头 #

如果需要在服务端根据上下文动态调整头（比如从context中获取用户信息），可以临时给Axios全局默认头赋值：

import axios from 'axios';
import type { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async (context) => {
  // 全局设置请求头（所有Axios请求都会生效）
  axios.defaults.headers.common['X-FOO'] = 'BAR';

  // 或者创建带默认头的实例，避免污染全局Axios
  const apiClient = axios.create({
    baseURL: BASE_URL,
    headers: {
      'X-FOO': 'BAR',
    },
  });

  const { data } = await apiClient.get('/path');

  return {
    props: { data },
  };
};

注意事项 #

• 方法1的拦截器方案更适合固定全局头，无需重复配置；
• 如果需要动态头（比如从context.req中获取用户token），可以在拦截器或实例创建时传入context相关参数；
• 不要混淆context.req.headers（客户端发给Next.js的请求头）和Axios的请求头（Next.js发给后端的请求头）。

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