fix(dev): skip JS responses for document requests

[sapphi-red]

Description

fixes #20705
refs #20376

[sapphi-red]

/ecosystem-ci run

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/vite@20866

commit: 8ee0ecb

[vite-ecosystem-ci]

📝 Ran ecosystem CI on 8cbbe1b: Open

suite	result	latest scheduled
histoire	❌ failure	✅ success
laravel	❌ failure	❌ failure
qwik	❌ failure	❌ failure
vite-setup-catalogue	❌ failure	❌ failure

✅ astro, analogjs, ladle, nuxt, marko, quasar, rakkas, react-router, unocss, storybook, vite-environment-examples, vike, sveltekit, vite-plugin-svelte, vite-plugin-react, vitepress, vite-plugin-vue, vite-plugin-cloudflare, one, vite-plugin-rsc, vuepress, vitest, vite-plugin-pwa, waku

[pi0]

Thanks for the fix @sapphi-red.

Trying v7.1.8, it now allows serving responses directly from the browser, but if doing fetch('/server') (or curl /server) and there is a root /server.ts file, it still returns the source code instead of hitting Nitro middleware when added as last.

Could we perhaps skip middleware if there is no fetchDest or is set to empty? (it will solve nitro issue, as current workaround i have is doing this)

[sapphi-red]

if doing fetch('/server') (or curl /server) and there is a root /server.ts file, it still returns the source code instead of hitting Nitro middleware when added as last.

This has been the behavior of Vite since the beginning, so unfortunately I think it needs to be introduced in a major. I do think curl /server shouldn't check /server.ts and would be better to fix it. But that requires a huge refactor and I currently don't have a bandwidth.

[pi0]

I see. Then no worries. I'm using this new workaround sound ok to you?

(remark: nitroDevMiddleware ensures executed once and skips /@ paths)

  server.middlewares.use(function nitroDevMiddlewarePre(req, res, next) {
    const fetchDest = req.headers["sec-fetch-dest"];
    if (fetchDest) {
      res.setHeader("vary", "sec-fetch-dest");
    }
    if (!fetchDest || /^(document|iframe|frame|empty)$/.test(fetchDest)) {
      nitroDevMiddleware(req, res, next);
    } else {
      next();
    }
  });

  return () => {
    server.middlewares.use(nitroDevMiddleware);
  };

[sapphi-red]

Sounds ok to me, as long as all the route handled by nitroDevMiddleware doesn't have an extension like .js, .vue.