Vite's dev server returns 404 if the request does not contain an Accept header

[ghost91-]

Describe the bug

When making a request to Vite's dev server without adding the Accept header, the server always returns a 404. According to RFC 7231, the Accept header is optional:

A request without any Accept header field implies that the user agent will accept any media type in response.

For that reason, I would expect Vite's dev server to just respond regularly if the Accept header is missing.

I am running into this problem when trying to use Playwright with Vite. Playwright has functionality to run a command to start the server (just calling vite, basically, in this case), and then polls the server URL until it receives a successful response. However, it performs the HTTP requests with a simple http.get (http from Node.js), and does not include an Accept header, so Vite's dev server always responds with a 404 and playwright runs into a timeout waiting for the server.

Reproduction

https://github.com/ghost91-/vite-dev-server-problem

System Info

System:
    OS: Linux 5.18 Arch Linux
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 23.20 GB / 31.10 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.15.1 - /run/user/1000/fnm_multishells/8953_1659556049790/bin/node
    npm: 8.13.2 - /run/user/1000/fnm_multishells/8953_1659556049790/bin/npm
  Browsers:
    Chromium: 103.0.5060.134
    Firefox: 103.0.1

Used Package Manager

npm

Logs

No response

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.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• 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.

[stefanocrosta]

Hi all! It looks like there's a similarly related bug with the specs of Accept

A request with Accept: application/json; */* should return the HTML page instead it returns 404

[SamuelTilly]

Looks like this also affects 302 redirects where Accept header is application/json, text/plain, */*?
Getting 404 when a proxied request returns 302 with Location header set to /

[segevfiner]

This also effects wait-on & curl which use Accept: */* and curl. See jeffbski/wait-on#78

[tnrich]

Just ran into this issue and spent a good half hour tracking it down. Plz fix 🙏

[mirhmousavi]

Please add a 4-hour investigation and a full-day frustration

[jafin]

This helped me as I was getting similar to OP. May be a workaround, adjust as desired.
In my case 404 was returned from vite dev server when header included application/json, I just blat it with */* to workaround
Editing the vite.config.ts to rewrite the accept header.

function fixAcceptHeader404() {
    return {
        name: 'fix-accept-header-404', // issue with vite dev server: https://github.com/vitejs/vite/issues/9520
        configureServer(server) {
            server.middlewares.use((req, _res, next) => {
                if (req.headers.accept == 'application/json, text/plain, */*') {
                    req.headers.accept = '*/*';
                }
                next();
            });
        },
    };
}

export default defineConfig({
    plugins: [
        //...
        fixAcceptHeader404(),
    ],