Next.js多域名中间件报错及单次执行需求解决方案咨询

问题描述 #

运行代码时出现错误：Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client，同时需要实现**每个访问用户仅执行一次redirectMiddleware**的需求，求优化方案。

原代码 #

MyApp组件代码 #

import { appWithTranslation } from 'next-i18next'
import redirectMiddleware from '../lib/middleware.js'

function MyApp({ Component, pageProps }) {
    return( 
        <Component {...pageProps} />
    )
}

MyApp.getInitialProps = async (appContext) => {
  const { ctx } = appContext;
  if (!ctx.req._middlewareExecuted) {
    try {
      await redirectMiddleware(ctx.req, ctx.res);
      ctx.req._middlewareExecuted = true;
    } catch (error) {
      console.error('Error in getInitialProps:', error);
    }
  }
  return {};
};

export default appWithTranslation(MyApp)

重定向中间件代码 #

import axios from 'axios';

const redirectMiddleware = async (req, res, next) => {
    try {
      const response = await axios.get('https://ipinfo.io/json');
      const { country } = response.data;

      if (country === 'QA') {
        res.writeHead(307, { Location: 'qatardomain' });
        res.end();
      } else if (country === 'US') {
        res.writeHead(307, { Location: 'usadomain' });
        res.end();
      } else if (country === 'CA') {
        res.writeHead(307, { Location: 'canadadomain' });
        res.end();
      } else {
        res.writeHead(307, { Location: 'default domain' });
        res.end();
      }
    } catch (error) {
      console.error('Error fetching user information:', error);
      next();
    }
};

export default redirectMiddleware;

错误原因分析 #

1. 头发送冲突：在getInitialProps中调用中间件发送重定向响应后，Next.js仍会继续处理请求并尝试发送其他响应头，导致重复发送头的错误。
2. 单次执行逻辑失效：req._middlewareExecuted仅存在于单次请求的对象中，用户后续访问会创建新的req对象，无法实现跨请求的“单次执行”。

优化方案 #

改用Next.js官方Middleware（适配Pages路由），结合Cookie记录用户重定向状态，从根源解决问题：

1. 创建全局中间件文件 pages/_middleware.js #

import axios from 'axios';
import { NextResponse } from 'next/server';

export async function middleware(req) {
  // 检查用户是否已执行过重定向
  const hasRedirected = req.cookies.get('has_redirected');
  
  if (!hasRedirected) {
    try {
      const response = await axios.get('https://ipinfo.io/json');
      const { country } = response.data;

      // 确定目标重定向域名
      let targetUrl = 'default domain';
      if (country === 'QA') targetUrl = 'qatardomain';
      else if (country === 'US') targetUrl = 'usadomain';
      else if (country === 'CA') targetUrl = 'canadadomain';

      // 生成重定向响应并设置Cookie标记
      const redirectRes = NextResponse.redirect(new URL(targetUrl, req.url));
      redirectRes.cookies.set('has_redirected', 'true', {
        maxAge: 60 * 60 * 24 * 30, // 30天有效期，可按需调整
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        path: '/',
      });
      return redirectRes;
    } catch (err) {
      console.error('获取用户IP信息失败:', err);
      // 出错时允许继续访问，并设置Cookie避免重复尝试
      const fallbackRes = NextResponse.next();
      fallbackRes.cookies.set('has_redirected', 'true', {
        maxAge: 60 * 60 * 24 * 30,
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        path: '/',
      });
      return fallbackRes;
    }
  }

  // 已重定向过，直接放行请求
  return NextResponse.next();
}

// 匹配所有路径的请求
export const config = {
  matcher: '/:path*',
};

2. 简化MyApp组件（移除getInitialProps） #

import { appWithTranslation } from 'next-i18next'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

方案优势 #

• 解决头发送错误：官方Middleware在请求生命周期早期执行，响应处理更规范，避免Next.js后续逻辑重复发送头。
• 可靠的单次执行：通过Cookie持久化标记，同一个用户的所有后续访问都会跳过重定向逻辑。
• 更安全的响应处理：使用NextResponseAPI封装响应操作，避免手动调用res.writeHead/res.end的潜在问题。
• 错误处理更合理：出错时设置Cookie，避免用户每次访问都触发错误请求，提升性能。

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