Next.js中间件中同时修改请求与响应的实现方法咨询

要同时实现修改请求头和设置响应Cookie，只需要把两个操作合并到同一个响应对象上即可——先通过NextResponse.next()传入修改后的请求头配置生成响应对象，再直接在这个对象上操作Cookie，不需要额外的复杂赋值。

完整实现代码 #

import { NextResponse } from 'next/server';

export function middleware(request) {
  // 1. 修改请求头
  const headers = new Headers(request.headers);
  headers.set('x-hello-from-middleware', 'foo');
  headers.delete('x-from-client');

  // 2. 创建带修改后请求头的响应对象
  const response = NextResponse.next({
    request: {
      headers: headers
    }
  });

  // 3. 在同一个响应对象上设置Cookie
  response.cookies.set({
    name: 'access_token',
    value: newAccessToken,
    expires: expiresString,
    path: '/'
  });

  return response;
}

为什么之前的写法不生效？ #

• response.request = headers：响应对象的request属性是只读的，不能直接赋值修改，必须在初始化NextResponse.next()时通过配置参数传入。
• 包含response: responseParams的写法：首先存在语法错误（request前缺少逗号），其次response配置项并非用于传递请求头，请求头的修改只能放在request配置字段里。

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