Next.js 13服务端请求时的Axios错误处理问题求助

针对你在Next.js 13 App Router中使用Axios拦截器时遇到的服务端请求错误处理问题，以下是具体解决方案和代码示例：

核心问题分析 #

服务端环境无法直接操作浏览器window对象，也不能直接修改Cookie，必须借助Next.js提供的服务端API来完成Cookie删除和页面重定向；同时notFound()函数的调用环境也需要严格区分客户端和服务端。

解决方案实现 #

1. 扩展TokenStorageService，支持服务端删除Cookie #

修改TokenStorageService，添加服务端删除Token的逻辑，通过设置Set-Cookie响应头让浏览器清除Cookie：

import Cookies from "js-cookie";
import { headers } from "next/headers";

export const TOKEN_KEY = "token";
const isServer = typeof window === "undefined";

export const TokenStorageService = {
  setToken(token: string) {
    Cookies.set(TOKEN_KEY, token);
  },

  async getToken() {
    return isServer
      ? (await import("next/headers")).cookies().get(TOKEN_KEY)?.value
      : Cookies.get(TOKEN_KEY);
  },

  removeToken() {
    if (!isServer) {
      Cookies.remove(TOKEN_KEY);
      return;
    }
    // 服务端删除Cookie：匹配设置时的属性，确保能成功清除
    const responseHeaders = headers();
    responseHeaders.set(
      "Set-Cookie",
      `${TOKEN_KEY}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT; HttpOnly; SameSite=Lax`
    );
  },
};

2. 修改Axios拦截器，区分环境处理错误 #

调整响应拦截器，针对服务端和客户端分别处理401、404状态码：

import axios from "axios";
import { notFound, redirect } from "next/navigation";
import { TokenStorageService } from "@/services/TokenStorageService";

const baseUrl = process.env.NEXT_PUBLIC_ROOT_URL;

const isClient = typeof window !== "undefined";

const instance = axios.create({
  baseURL: baseUrl,
  headers: {
    "Content-type": "application/json",
  },
});

instance.interceptors.request.use(
  async (config) => {
    const token = await TokenStorageService.getToken();

    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    return config;
  },
  (error) => Promise.reject(error),
);

instance.interceptors.response.use(
  (config) => config,
  async (error) => {
    if (axios.isAxiosError(error)) {
      const { response } = error;

      if (response && response.status === 401) {
        await TokenStorageService.removeToken();
        if (isClient) {
          window.location.href = "/auth";
        } else {
          // 服务端调用redirect会终止当前请求，直接跳转
          redirect("/auth");
        }
      }

      if (response && response.status === 404) {
        if (isClient) {
          window.location.href = "/page-not-found";
        } else {
          // 服务端调用notFound触发Next.js内置404页面
          notFound();
        }
      }
    }

    return Promise.reject(error);
  },
);

export default instance;

关键注意事项 #

• API调用限制：redirect()和notFound()只能在服务器组件、服务器动作或路由处理器中使用，客户端组件中调用会报错，确保服务端Axios请求在合法环境执行。
• Cookie属性一致性：删除Cookie时的属性（如HttpOnly、SameSite）要和设置Cookie时完全一致，否则浏览器可能不会清除Cookie。
• 服务端代码终止：调用redirect()或notFound()后，服务端代码会立即终止，后续逻辑不会执行。

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