Skip to content

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

@paolavaldivia

Description

@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:

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: browserIssues and PRs related to the browser runnerp3-minor-bugAn edge case that only affects very specific usage (priority)

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions