`__vitest_attachment__` endpoint returns 404 in browser mode with projects configuration due to token mismatch

[paolavaldivia]

Describe the bug

When using Vitest with:

• Browser mode (@vitest/browser)
• Projects configuration (test.projects)
• Screenshot testing (toMatchScreenshot)

The __vitest_attachment__ endpoint fails with 404 errors, preventing screenshot diff images from being displayed in the test UI:

Root cause
After debugging the Vitest source code with added logging, I found that when using test.projects, the isValidApiRequest fails when validating the token. My assumption is that Vitest creates multiple server instances with different API tokens. The browser receives a token from one instance, but the attachment middleware validates against a different instance's token, causing all attachment requests to fail.

Workaround

• Use a custom Vite plugin to serve attachments directly.

Reproduction

https://github.com/paolavaldivia/vitest-browser-attachment-bug

System Info

System:
OS: macOS 15.7.2
CPU: (11) arm64 Apple M3 Pro

Binaries:
Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm

npmPackages:
@vitest/browser: ^4.0.15 => 4.0.16
@vitest/browser-playwright: ^4.0.15 => 4.0.16
playwright: ^1.49.1 => 1.57.0
vite: ^6.0.11 => 6.4.1
vitest: ^4.0.15 => 4.0.16

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.