vite preview … server does not send configured headers

[stephenmartindale]

Description

Vite's dev. server has the ability to serve custom HTTP headers -- a feature that is often very necessary. For example, I use it to serve the following two headers to enforce cross-origin isolation and enable high-precision performance.now():

        server: {
            headers: {
                "Cross-Origin-Opener-Policy": "same-origin",
                "Cross-Origin-Embedder-Policy": "require-corp",
            },
        }

The same feature is currently not provided by Vite's preview server (vite preview …) but it should be! These headers are no less necessary when previewing production artefacts than when using the dev. server. (vite/3.0.9 linux-x64 node-v16.17.0)

Concretely, the following configuration would be ignored by vite preview … and the cross-origin isolation headers would not be served by that:

        server: {
            headers: {
                "Cross-Origin-Opener-Policy": "same-origin",
                "Cross-Origin-Embedder-Policy": "require-corp",
            }
        },
        preview: {
            headers: {
                "Cross-Origin-Opener-Policy": "same-origin",
                "Cross-Origin-Embedder-Policy": "require-corp",
            }
        },

The documentation for vite preview … options does not indicate that the above configuration should work, suggesting that I am requesting a new feature, here, but the TypeScript definitions for Vite's configuration structures suggest that this is a bug, not a feature omission:

• config.preview is an optional PreviewOptions which extends CommonServerOptions
preview.ts line 23
• CommonServerOptions includes headers: optional HttpServerHeaders
http.ts line 72
• CommonServerOptions is the same type used for config.server for the dev. server
  server/index.ts line 76

Suggested solution

The ability to send headers when previewing production artefacts is vital for proper previewing with Vite.

1. This should be implemented and my second configuration snippet should work.
2. The documentation for vite preview … options should be updated.
3. The TypeScript definitions for Vite's configuration structures need not be altered -- they reflect the ideal.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

For a workaround, I guess this plugin will work.

const p = {
  name: 'p',
  configurePreviewServer(server) {
    server.middlewares.use((req, res, next) => {
      res.setHeader("Cross-Origin-Opener-Policy", "same-origin")
      res.setHeader("Cross-Origin-Embedder-Policy", "require-corp")
      next()
    })
  }
}

[stephenmartindale]

That's a good thought, @sapphi-red , but, sadly, you'd be wrong. … er… hang on…

I used to have this plugin in my vite.config.[tj]s file:

let crossOriginIsolation = {
    name: 'cross-origin-isolation',
    configureServer: server => {
        server.middlewares.use((_, response, next) => {
            response.setHeader("Cross-Origin-Opener-Policy", "same-origin");
            response.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
            next();
        });
    }
};

The fact that this plugin of mine was not working lead me down the path to the headers option and to the investigative process that ended with my filing of this issue.

Now, I notice that I was using configureServer and your plugin is using configurePreviewServer. You are, perhaps, not wrong — I'll try yours and let you know if it works, tomorrow. (Thanks!)

[stephenmartindale]

Ok. I tested it and the following plugin works for both the dev. server and for the preview server:

function crossOriginIsolationMiddleware(_, response, next) {
    response.setHeader("Cross-Origin-Opener-Policy", "same-origin");
    response.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
    next();
}

const crossOriginIsolation = {
    name: 'cross-origin-isolation',
    configureServer: server => { server.middlewares.use(crossOriginIsolationMiddleware); },
    configurePreviewServer: server => { server.middlewares.use(crossOriginIsolationMiddleware); },
};

Thanks, @sapphi-red . The work-around is good to go.