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: {/* … */}
      },
    ];
  },
};

[rtconner]

Is this not implemented? I cannot find any documentation on it.

[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"
     }]
  }
}

[TommySorensen]

Was this ever solved with async rewrites() and async headers() in config file?

[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,
    },
  });
}

[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.

[nileshtrivedi]

Has anyone managed to get it work? I need to set bearer token as a request header to the proxy destination.

[TommySorensen]

Has anyone managed to get it work? I need to set bearer token as a request header to the proxy destination.

Yeah. I'm using next-auth package where i attach the bearer token to the request whenever the a route with /proxy is detected.
This is done in the middleware since i can't to this in the next-config because the external API's requires a bearer token and dont want to read my cookies.

An example url that will rewrite is https://www.yourside.com/proxy/product/get-product/123456 => https://www.someurl.com/api/product/get-product/123456

// middleware.ts

import { proxyHandler } from './middleware/proxy';

// Add following code somewhere in your middleware .
// The request should have type: `request: NextRequest | NextRequestWithAuth`

if (request.nextUrl.pathname.startsWith('/proxy')) {
  // Proxy client requests to external API's
  const { url, headers, error } = await proxyHandler(request);

  if (error) {
    return NextResponse.json({ error }, { status: 404 });
  }

  if (url) {
    return NextResponse.rewrite(url, { request: { headers } });
  }
}

The proxy function

// proxy.ts
import { NextRequestWithAuth } from 'next-auth/middleware';
import { NextRequest } from 'next/server';

const headersUsed = ['Content-Type', 'Api-Version'];
const exposedApis = {
  product: 'https://www.someurl.com/api/product',
  search: 'https://www.someurl.com/api/search',
};

export async function proxyHandler(request: NextRequest | NextRequestWithAuth) {
  const requestUrl = new URL(request.url);
  const [, , api, ...slug] = requestUrl.pathname.split('/');
  const baseProxyUrl = exposedApis[api as keyof typeof exposedApis];

  // Non supported api requested in URL. We don't want to expose all API's to the client.
  if (!baseProxyUrl) {
    return { error: 'Invalid proxy url' };
  }

  // Construct the proxy URL
  const proxyPathname = `${new URL(baseProxyUrl).pathname}/${slug.join('/')}`;
  const proxyUrl = new URL(proxyPathname, baseProxyUrl);
  requestUrl.searchParams.forEach((value, key) => {
    proxyUrl.searchParams.append(key, value);
  });

  // Only include the supported headers
  const requestHeaders = new Headers(request.headers);
  const proxyHeaders = new Headers();
  headersUsed.forEach((header) => {
    if (requestHeaders.has(header)) {
      proxyHeaders.append(header, requestHeaders.get(header)!);
    }
  });

  // Proxy should work with or without Authorization header
  const idToken = (request as NextRequestWithAuth).nextauth.token?.idToken;
  idToken && proxyHeaders.set('Authorization', `Bearer ${idToken}`);

  return {
    url: proxyUrl,
    headers: proxyHeaders,
  };
}

[nileshtrivedi]

@TommySorensen Interesting! Can you tell me what NextJS version is this working with? The same approach does not seem to work with v14.0.4.

cc: @Mohammed-Fayaz

[TommySorensen]

@TommySorensen Interesting! Can you tell me what NextJS version is this working with? The same approach does not seem to work with v14.0.4.

cc: @Mohammed-Fayaz

I currently run 14.1.0 which is a bit old

[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/, ''),
    ...
  },
}

[haraldev01]

For anyone still grappling with this issue, you don't have to choose between using middleware and using nextjs rewrites. You can set the authorization (or whatever) headers you need in the middleware, and then let the normal rewrites in the next.config do the rewrite part.

middlware.ts

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

export function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set("x-hello-from-middleware1", "hello");
  requestHeaders.set("Authorization", "Bearer ******");

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });

  return response;
}

export const config = {
  matcher: "/api/auth/:slug*",
};

next.config.js

async rewrites() {
    return [
      {
        // source: "/api/auth/:slug*",
        source: "/api/auth/:slug*",
        destination: "https://postman-echo.com/get",
      },
    ];
  },

going to localhost:3000/api/auth will then return the response from postman-echo including the headers we set in the middleware.

It's a bit impractical splitting the setup over two files in different parts of the project, but this way you don't have to deal with a lot of regex stuff as that's handled by the parts of Next meant to handle that. Middleware attaches the headers and config rewrites actually rewrite stuff. Works for me.

[aldenquimby]

Somewhat related - does anyone know how x-vercel-proxy-signature is computed, and if that could be used to verify a request as coming from a Vercel rewrite? I see this header coming through my request logs for rewrites, but I can't find any documentation on it

[sandro-yiuuio]

I get all of the above... however, why is a combination of async rewrites() and async headers() in next.config.js not working? In theory, as it is described in the documentation this should do the trick or am I completely mistaken?

async headers() {
    return [
      {
        source: '/api/chatgpt/:slug*',
        headers: [
          {
            key: 'Authorization',
            value: `Bearer ${process.env.CHATGPT_API_KEY}`,
          },
          {
            key: 'OpenAI-Organization',
            value: process.env.CHATGPT_ORGANIZATION_ID,
          },
          {
            key: 'OpenAI-Project',
            value: process.env.CHATGPT_PROJECT_ID,
          },
        ],
      },
    ]
  },
async rewrites() {
    return [
      {
        source: '/api/chatgpt/:slug*',
        destination: "https://api.openai.com/v1/:slug*",
      },
    ]
  },

[aldenquimby]

@sandro-yiuuio headers sets response headers. But in this case we need to add request headers when forwarding to the proxy

[daveycodez]

middleware invocations ($$$) shouldn’t be required for this

[artola]

It would be nice to be able to set headers in redirects ({source, destination, headers}) or even just with an API source: (req) => destination then we are able to dynamically modify the request headers and destination. For example for A/B testing.