Pass custom headers to rewrites proxy

[lfender6445]

Feature request

Is your feature request related to a problem? Please describe.

I would like to pass custom header values to my fallback application

Describe the solution you'd like

something close to this https://nextjs.org/docs/api-reference/next.config.js/headers

Describe alternatives you've considered

I have tried supplying the custom header using methods outlined in https://nextjs.org/docs/api-reference/next.config.js/headers but checking here it appears that headers are not passed to the proxy, at-least not in a way I'd expect.

Additional context

In my case, the proxied application sits behind cloudflare firewall that can only be bypassed with specific header kvp

[minusfive]

Yeah, this would be great! If I'm understanding @lfender6445 correctly, it'd be something like:

module.exports = {
  /* … */,
  async rewrites() {
    return [
      {
        source: '/blog/:path*',
        destination: 'https://some.external.blog/:path*',
        headers: {/* … */}
      },
    ];
  },
};

[salohcinzero]

Yes! I would love this because i'm struggling to add an apikey header to an external rewrite. I can't find any way to do this currently even with 3rd party pkgs

[stuckinaboot]

Was this ever addressed?

[truefalse10]

i am also interested in a solution to this problem

[MickVermeulen]

Also struggling with this, was this ever resolved? My use case is adding an access key to an API I'm developing locally on a different local port, it seems like my custom header is not included in the proxied request.

[BrendanDavies]

I would also find this very useful. I am attempting to proxy a legacy service that would require some custom headers on the proxied request.

I was able to get around this with an API route that is utilizing http-proxy-middleware (Thanks to this post), but this feels brittle in the long run.

I was also able to get this to work by adding a headers key to the rewrite rules, and then passing that to the http-proxy.
canary...BrendanDavies:allow-headers-on-rewrites

[bbeck10]

@leerob the middleware only allows setting the response headers, not the headers sent to an upstream server. Do you have plans to allow that?

[icyJoseph]

What I usually do is, in for example getServerSideProps, check the context.res property, which contains stuff set by the middleware. It is hack, but it works.

import type { GetServerSidePropsContext, NextPage } from "next";
import Link from "next/link";

const Home: NextPage = () => {
  return (
    <div>
      Home <Link href="/blog">blog</Link>
      <div>more stuff</div>
    </div>
  );
};

export const getServerSideProps = (ctx: GetServerSidePropsContext) => {
  console.log(ctx.res.getHeader("tomato")); // logs foo
  return { props: {} };
};

export default Home;

And this middleware:

import { NextResponse, type NextRequest } from "next/server";

const PUBLIC_FILE = /\.(.*)$/;

export function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl;
  if (
    pathname.startsWith("/_next") || // exclude Next.js internals
    pathname.startsWith("/api") || //  exclude all API routes
    pathname.startsWith("/static") || // exclude static files
    PUBLIC_FILE.test(pathname)
  )
    return NextResponse.next();

  const response = NextResponse.next();

  response.headers.set("tomato", "foo");

  return response;
}

This is also possible in api/routes.

[mdathersajjad]

Also in need of this feature to distinguish between proxied request and normal request. I am proxying some paths to endpoints in the same project . But unable to distinguish between proxied and direct request. I think there should be an option to pass headers to proxy request. It will solve a lot of use case @timneutkens . Is this feature planned in upcoming release ? @BrendanDavies PR looks like the solution

[leerob]

You can now self-serve custom routing, including rewrites, using Middleware: https://nextjs.org/docs/middleware

[sanderkranz]

@chrisui here is the rewrite function from Next.js source:

static rewrite(destination) {
    return new NextResponse(null, {
        headers: {
            'x-middleware-rewrite': (0, _utils).validateURL(destination)
        }
    });
}

So, you can do something like this to combine rewrite and custom headers:

return new NextResponse(null, {
  headers: {
    'x-middleware-rewrite': '<url>',
    'x-robots-tag': 'noindex'
  }
})

But it's a hacky workaround.

[sanderkranz]

I found a better solution which works for me:

1. Declare rewrites logic in the _middleware.js (using the NextResponse.rewrite).
2. Declare custom headers in the next.config.js.

[ashburnham]

Hi @sanderkranz - do you have a code example of this? I'm really stumped by getting this to work and it would really help. Thank you so much!

[sanderkranz]

Hi @ashburnham, it's just:

/* pages/_middleware.js */

import {NextResponse} from 'next/server'

export default () => {
  return NextResponse.rewrite('<someUrl>')
}

/* next.config.js */

module.exports = {
  async headers () {
    return [{
      source: '/:path*',
      headers: [{
        key: 'X-Robots-Tag',
        value: 'noindex'
      }],
    }]
  },
}

If you need to apply the rewrite and header for a specific path, you simply put a condition in the _middleware.js and change the source pattern in the config.

[sKopheK]

@sanderkranz
"Headers allow you to set custom HTTP headers on the response to an incoming request on a given path."
https://nextjs.org/docs/pages/api-reference/next-config-js/headers
so you're effectivelly adding them to response and not the request

[kaufmann42]

Any updates on this?

[jcity]

Posting this to save time for others that come across.

My situation is I need a middleware to download files but the server that had the files need a special auth header. Here's how I did it with axios to download the file. Keep in mind this using the arraybuffer response type so if you're just trying to pass on JSON you'll need to change that

// _middleware.ts
import { NextRequest, NextResponse } from 'next/server'
import axios from 'axios'
import fetchAdapter from '@vespaiach/axios-fetch-adapter'

const API_URL = "YOUR_API_URL"

export async function middleware(nextRequest: NextRequest) {
  // match route
  if (nextRequest.nextUrl.pathname.startsWith('/download/attachments/')) {
    // get the requested id from the pathname
    const documentId = nextRequest.nextUrl.pathname.split('/').pop()

    // get auth token - this is currently stored in the users cookie
    let authToken
    try {
      authToken = JSON.parse(nextRequest.cookies.auth).access_token
    } catch (error) {
      console.log(`Tried to download document ${documentId} but had no auth cookie`)
    }

    // Make sure the document id is a number
    if (documentId.match(/[0-9]+/) && authToken) {

      // Create special axios instance that uses the fetch adapter (was getting stream errors without this)
      const axiosInstance = axios.create({
        adapter: fetchAdapter
      })

      // Use special axios instance to download the file
      return axiosInstance
        .get(`${API_URL}/${documentId}`, {
          headers: { Authorization: `Bearer ${authToken}` },  // Here is where the auth header is added
          responseType: 'arraybuffer'
        })
        .then(axiosResponse => {
          // Pass on data and headers to the NextResponse
          const resBuffer = Buffer.from(axiosResponse.data)
          return new NextResponse(resBuffer, {
            headers: axiosResponse.headers,
            status: axiosResponse.status
          })
        })
        .catch(error => {
          // Pass on data and erros to the NextResponse
          const resBuffer = Buffer.from(error.response.data)
          return NextResponse.json(JSON.parse(resBuffer.toString()), {
            status: error.response.status
          })
        })
    }
  }
}

[bbeck10]

For those watching this issue - I've created a draft PR that exposes the upstream proxy config which allows setting headers (as well as other options which I needed for our use case). #40277. Still working through whatever other steps I need to do according to the contributing guidelines.

[sambacha]

For those watching this issue - I've created a draft PR that exposes the upstream proxy config which allows setting headers (as well as other options which I needed for our use case). #40277. Still working through whatever other steps I need to do according to the contributing guidelines.

hell ya

[brendonco]

how to include bearer token when rewrite?

async rewrites () {
  return {
     fallback: [{
       source: "/api/:path*",
       destination: "your external api"
     }]
  }
}

[leerob]

I think something like this should work:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export const config = {
  matcher: '/product/:path',
};

// Proxies /product/:id to https://my-proxied-site.com/product/:id
export function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('Authorization', 'Bearer ******');

  // Extract product id from pathname
  const [, , id] = request.nextUrl.pathname.split('/');
  request.nextUrl.href = `https://vercel.com/product/${id}`;

  return NextResponse.rewrite(request.nextUrl, {
    request: {
      headers: requestHeaders,
    },
  });
}

[themegabyte]

This seems to be causing a huge delay. What could be the reason?

FYI I think it won't happen in production. I was in dev mode when I took the above screenshot. This is the issue #38273

FYI2: Please upgrade to Next 13 before attempting the above snippet.

[vaibhavshn]

@themegabyte (also cc @leerob) I saw the same thing in production as well. Not sure if it was Next 13, but I think that shouldn't matter, as I tried it with experimental edge too and saw the same thing.

[themegabyte]

@themegabyte (also cc @leerob) I saw the same thing in production as well. Not sure if it was Next 13, but I think that shouldn't matter, as I tried it with experimental edge too and saw the same thing.

@vaibhavshn you saw the same thing in production? That is the delay?

[vaibhavshn]

@themegabyte (also cc @leerob) I saw the same thing in production as well. Not sure if it was Next 13, but I think that shouldn't matter, as I tried it with experimental edge too and saw the same thing.

@vaibhavshn you saw the same thing in production? That is the delay?

Yes, the delay.

[martinmiglio]

I've tried to implement this in NextJS 14.1.0 and it doesn't seem to rewrite the headers at all.

Here's my implementation just to make sure I'm not missing anything:

export const config = {
  matcher: "/api/analysis/:path*",
};

export function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set(
    "x-api-key",
    "my key"
  );

  request.nextUrl.href = new URL(
    request.nextUrl.pathname.split("/").splice(3).join("/"),
    "http://example.com/api/"
  ).toString();

  return NextResponse.rewrite(request.nextUrl, {
    request: {
      headers: requestHeaders,
    },
  });
}

If anyone has any clues as to why this isn't rewriting headers, help me out.

[mastoj]

Can I use middleware to just deal with the custom header and still use the rewrite to deal with rewrites?

It would be very appreciated if we could define custom headers for rewrites without involving middleware to keep the middleware as simple as possible.

[n3ps]

Would be nice if it's as simple as Vite's proxy config:

proxy: {
  '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, ''),
    ...
  },
}