javascript - 如何在 Next.js 中修改请求 header

Question

我需要为对服务器的每个请求添加一个 header 。
我这样做是使用 _midleware像这样:

export async function middleware(req: NextRequest): Promise<NextResponse> {
    req.headers.append('x-custom-header', '1337');
    return NextResponse.next();
}

如果我这样做 console.log(req.headers)我看到请求 header 已添加:

BaseHeaders [Headers] {
    [Symbol(map)]: {
      accept: [ '*/*' ],
      'accept-encoding': [ 'gzip, deflate, br' ],
      'accept-language': [ 'en-GB,en-US;q=0.9,en;q=0.8' ],
      'cache-control': [ 'no-cache' ],
      connection: [ 'keep-alive' ],
      cookie: ...,
      host: ...,
      pragma: [ 'no-cache' ],
      referer: ...,
      ...,
      'x-custom-header': [ '1337' ]
    }
  }

但是，这不会修改请求:浏览器中没有请求 header 。
为什么请求没有被修改？是否有其他方法可以修改 Next.js 中的请求 header ？

Answer 1

这对我有用。 header 在中间件中更改并反射(reflect)在 getServerSideProps 中。

export async function middleware(request: NextRequest) : Promise<NextResponse> {
    const response = NextResponse.next()
    response.headers.append("key", "value")
    return response
}


//inside page
export const getServerSideProps = wrapper.getServerSideProps(store => async (context) => {
    //the headers are changed here
    console.log(context.res.getHeaders())
    return {
      props: {}
    }
  }
});