在Next.js开发服务器中重写Set-Cookie的Domain字段

完全可以只针对开发服务器配置Cookie重写的中间件操作，以下是具体实现步骤：

核心思路 #

通过判断当前环境是否为开发环境（process.env.NODE_ENV === 'development'），仅在本地开发时执行Cookie的Domain字段替换逻辑，生产环境保持原有Apache的ProxyPassReverseCookieDomain处理逻辑不变。

具体实现 #

1. 在项目根目录创建中间件文件 middleware.js（如果用TypeScript则创建 middleware.ts）：

import { NextResponse } from 'next/server'

export function middleware(request) {
  // 仅在开发环境执行逻辑
  if (process.env.NODE_ENV !== 'development') {
    return NextResponse.next()
  }

  const response = NextResponse.next()
  const setCookieHeaders = response.headers.get('Set-Cookie')

  if (setCookieHeaders) {
    // 替换Cookie中的目标Domain为localhost，将`your-production-domain.com`替换为实际生产域名
    const rewrittenCookies = setCookieHeaders.split(', ').map(cookie => {
      return cookie.replace(/Domain=your-production-domain.com;/g, 'Domain=localhost;')
    }).join(', ')
    
    response.headers.set('Set-Cookie', rewrittenCookies)
  }

  return response
}

// 仅匹配API路由，避免影响静态资源和页面路由
export const config = {
  matcher: '/api/:path*',
}

2. 保留原有next.config.js中的重写配置，两者可协同工作：

const nextConfig = {
  // 其他项目配置...
}

if (process.env.BACKEND_API) {
    nextConfig.rewrites = async () => {
        return [
            {
                source: '/api/:path*',
                destination: `${process.env.BACKEND_API}/:path*`
            }
        ]
    }
}

module.exports = nextConfig

注意事项 #

• 若后端返回多个Set-Cookie字段，代码通过split(', ')拆分后逐个处理，确保所有Cookie的Domain都被正确替换
• 替换规则中的your-production-domain.com需要替换为实际生产环境中Cookie的Domain值，比如如果是.example.com就写Domain=.example.com;
• 中间件的matcher配置确保仅对API请求生效，不会干扰静态文件或页面的正常加载

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