json/svg/others? import does not work when dev server is behind a proxy

[adam-homeboost]

Describe the bug

I have a react/typescript app running under the vite dev server. This dev server is running behind a reverse proxy.

When doing import data from "./data.json" I get error: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.

Observationally from the network console, I can see that data.json is being loaded by the browser, but it is raw json, not the transformed to javascript code that this import should usually generate.

I can see this also happen with the svg logo in the basic "getting started" recipe.

The main thing that appears to be driving this is that I am running the dev server behind a reverse proxy. If I hit the dev server directly via one of the urls it is listening on, then the import works! It is only when the dev server is hit via the reverse proxy that this fails. To the best of my knowledge, the only difference there from the dev server's perspective is going to be some HTTP request headers (such as Host, etc).

Reproduction

needs a proxy, can't be done with just a repo.

Steps to reproduce

A simple way to go:

1. Create a vite app using `npm create vite@latest my-app -- --template react-ts
2. Add a data.json file in src
3. Add import data from "./data.json" in src/App.tsx`
4. run vite dev server
5. Use browser to hit one of the "listening" urls. Open dev console: observe no errors
6. set up a reverse proxy of some kind that points to the dev server
7. Open a url that hits the proxy and thus the dev server (may need to mess with base depending on your setup). Open console, observe import errors
8. In network tab, notice that data.json was loaded successfully, but look at content and note that it is raw json, not javascript.

System Info

System:
    OS: macOS 15.2
    CPU: (14) arm64 Apple M3 Max
    Memory: 180.91 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.4.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 18.2
  npmPackages:
    @vitejs/plugin-react: ^4.3.4 => 4.3.4
    vite: ^6.0.5 => 6.0.7

Same issue in vite 5.x.

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.

[hyrious]

The vite dev server serves the json files in two ways -- If you access to the file directly with the url like http://localhost:5173/data.json, it returns the raw JSON. If the file is imported by a js/ts file, the url will become http://localhost:5173/data.json?import and in which case it returns the transformed js module.

You can have a look at your devtool's network tab and see whether the query ?import exist and is correctly forwarded by your reverse proxy.

[hi-ogawa]

6. set up a reverse proxy of some kind that points to the dev server

Can you elaborate on which kind exactly? As suggested by hyrious, the issue could be on reverse proxy functionality.

[github-actions]

Hello @adam-homeboost. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[adam-homeboost]

@hyrious In both cases the ?import is present on that file in the network tab.

[adam-homeboost]

@hi-ogawa It definitely seems to be related to the reverse proxy usage. I'm not sure if the exact nature matters very much but my current implementation is just a simple python server running under flask that is forwarding requests to the dev server using the requests library.

The only difference that the dev server would see would be in the request headers. Here are examples of the two sets of headers for the two different situations:

1. Working case: Non-proxy, direct hit to one of the urls the dev server is listening to:

GET / HTTP/1.1
Host: 192.168.105.1:3000
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
If-None-Match: W/"307-JRtU9EK0Q8U2u0QqRKeRj3eEMXI"

2. Non-working case, hit via proxy:

GET / HTTP/1.1
Host: 192.168.105.1:3000
User-Agent: python-requests/2.32.3
Accept-Encoding: gzip, deflate, br, zstd
Accept: */*
Connection: keep-alive

Note that the 'Host' is the same on both. As for the other headers, I cannot imagine which differences matter. I can however control the headers the proxy sends, so willing to try whatever you suggest.

So far however, replicating the headers that work to the case that does not isn't helping.