Disable Etag generation on API routes

[marcneander]

Describe the feature you'd like to request

I'd like to be able to disable the Etag generation on api routes just like i can do for normal pages via generateEtags: false in next.config.js

Describe the solution you'd like

Would probably also be nice to disable etag generaion on specific api routes so extending the config object like below could be a solution.

export const config = {
  api: {
    generateEtags: false
  }
};

Describe alternatives you've considered

Make API routes respect the generateEtags: false in next.config.js

[pudgereyem]

I think the solution proposed by @marcneander is nice.

Current workaround that I use

I make use of the on-headers package to remove the ETag header, see code below.

import { NextApiRequest, NextApiResponse } from 'next';
import onHeaders from 'on-headers';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  // remove ETag since Redis otherwise will cache the response twice as long
  onHeaders(res, function() {
    this.removeHeader('ETag');
  });

  res.status(200).json({foo: 'bar'});
};

[marcneander]

Oh nice, didn't know about the on-headers package

[SleepWalker]

There is another workaround without extra libs:

https://stackoverflow.com/questions/66704732/how-to-stop-next-js-api-from-overriding-my-etag-header

But the downside is that you can not use helper methods (status(), json()) because they will try to resend headers that was already sent by writeHead

[iamstarkov]

this recipe with 'on-headers' worked for my project

[raphaelpc]

+1

I'm having problems with the way ETag is generated on the API routes.
From my investigations, this is how ETags are generated today:

next.js/packages/next/server/api-utils.ts

Lines 271 to 273 in 567d47b

	const isJSONLike = ['object', 'number', 'boolean'].includes(typeof body)
	const stringifiedBody = isJSONLike ? JSON.stringify(body) : body
	const etag = generateETag(stringifiedBody)

My situation: i'm using NextAuth to implement authentication on my application.
I'm trying to implement CORS on the NextAuth endpoints (i will have more than one application on my domain).
The way i was able to do so was changing the next.config.js of my AUTH application to be like that:

// next.config.js
module.exports = {
  async headers() {
    return [
      // https://vercel.com/support/articles/how-to-enable-cors#enabling-cors-in-a-next.js-app
      // https://nextjs.org/docs/api-reference/next.config.js/headers#header-cookie-and-query-matching
      {
        // matching all auth API routes
        source: "/api/auth/:path*",
         // if the origin has '.my-domain.com'...
        has: [
          { type: 'header', key: 'Origin', value: '(?<origin>^https:\/\/.*\.my-domain\.com$)' },
        ],
        // these headers will be applied
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: ':origin' },
          { key: 'Access-Control-Allow-Methods', value: 'GET, OPTIONS, PATCH, DELETE, POST, PUT' },
          { key: 'Access-Control-Allow-Headers', value: 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version' },
        ],
      },
    ];
  }
};

That way, if the "Origin" header of the request matches the REGEX, it's value will be the value of the "'Access-Control-Allow-Origin'" header of my response.

The error happening to me is the same described in this StackOverflow post.
The proposed solution was:

You should modify the application to generate different Etag for different Origin.

The problem is that NextJS only considers the body in its Etag generation, so different Origins will have the same Etag.
So, i believe that is a bug on the way NextJS generates its Etags. If not, it would be really useful to be able to disable Etag generation on the API routes.

Thanks in advance for any help!

[sambacha]

any official fix for this issue planned yet?

[mschilde]

This would be a really useful option. Currently the response body is used in the etag generation. Also if an etag header is set it is simply overwritten. And the config parameter generateEtags does not affect API routes.

I would like to be able to either:

• set an etag header myself (i.e. if the header is present, do not overwrite it) - or
• disable etag generation for the api routes - or
• configure the etag behaviour somehow (some routes can generate an etag based on the request alone, which saves a lot of backend work)