Next.js Pages Router存Bearer Token到Cookie仍遇Unauthorized问题

我正在使用Next.js Pages Router，按如下方式将access_token存入Cookie中，确认token已正确设置，但发起请求时仍收到“Unauthorized”返回，请问这是为什么？

登录API路由代码 #

import { api } from "../axios";
import Cookies from "js-cookie";

export async function login(data: SignInFormData) {
  try {
    const response = await api.post("/auth/login", data);

    const token = response.data.access_token;
    Cookies.set("jwt", token, {
      expires: 100
    });

    return response.data;
  }
}

Axios配置代码 #

import axios from "axios";
import Cookies from "js-cookie";

export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
  headers: { "Content-Type": "application/json" },
  timeout: 1000,
  maxRate: 1000,
});

// Request interceptor
axios.interceptors.request.use(
  async (config) => {
    const accessToken = Cookies.get("jwt");

    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

核心问题与解决方案 #

核心问题：Axios拦截器挂载对象错误 #

你创建了自定义的Axios实例api，但把请求拦截器挂载到了全局的axios对象上，这就导致用api发起的请求根本不会触发这个拦截器，自然不会带上Authorization头，后端返回Unauthorized。

修复方法 #

将拦截器挂载到你创建的api实例上，而非全局axios：

import axios from "axios";
import Cookies from "js-cookie";

export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
  headers: { "Content-Type": "application/json" },
  timeout: 1000,
  // 跨域请求需添加此项，否则Cookie无法携带至后端
  withCredentials: true,
});

// 修改为api.interceptors.request.use
api.interceptors.request.use(
  (config) => {
    const accessToken = Cookies.get("jwt");
    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

其他排查方向 #

1. Cookie路径设置：默认Cookie路径为当前页面路径，若API请求路径与Cookie路径不匹配，前端无法获取Cookie。可显式设置根路径：

Cookies.set("jwt", token, {
  expires: 100,
  path: "/"
});

2. 跨域配置一致性：若前后端域名不同，除axios设置withCredentials: true，后端需配置：
   • Access-Control-Allow-Credentials: true
   • Access-Control-Allow-Origin指定前端域名（不能为*）
3. Token有效性验证：在浏览器控制台打印accessToken确认格式无误，或用Postman携带该token请求后端接口，验证token本身是否有效（未过期、签名正确）。
4. 请求头覆盖检查：确认是否有其他代码在发起请求时单独设置headers，覆盖了拦截器添加的Authorization头。

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