Allow Dev Server to Work Behind a Proxy

[titouandk]

Description

I am developing a Vue app.

The app is served behind a proxy in development—not in production.

Problem: The proxy removes a part at the start of the path—confusing Vite dev server.

Current flow of a page request from the browser (to test a change during development):

          BROWSER                REVERSE PROXY       VITE DEV SERVER:5050
             |                        |                       |
  Lets get the homepage of            |         Start Vite Server on port 5050
 my app, which is located at          |          Set base URL as /proxy/5050/
        /proxy/5050/                  |                       |
             |                        |                       |
             |    GET /proxy/5050/    |                       |
             |----------------------->|                       |
             |                        |                       |
             |               Removes /proxy/5050/             |
             |                 prefix from path               |
             |                        |                       |
             |                        |         GET /         |
             |                        |---------------------->|
             |                        |                       |
             |                        |            My Base path is configured
             |                        |                as /proxy/5050/ ...
             |                        |             Lets redirect the user.
             |                        |                       |
             |                        | REDIRECT /proxy/5050/ |
             |                        |<----------------------|
             |                        |                       |
             |                 Adds /proxy/5050/              |
             |                to the redirection              |
             |                  target path                   |
             |                        |                       |
             | REDIRECT /proxy/5050/proxy/5050/               |
             |<-----------------------|                       |
             |                        |                       |
Weird URL (not a problem per se.)     |                       |
      Let's request it.               |                       |
             |                        |                       |
             | GET /proxy/5050/proxy/5050/                    |
             |----------------------->|                       |
             |                        |                       |
             |               Removes /proxy/5050/             |
             |                 prefix from path               |
             |                        |                       |
             |                        |   GET /proxy/5050/    |
             |                        |---------------------->|
             |                        |                       |
             |                        |                   All right!
             |                        |            Sending index.html homepage
             |                        |                (containing the Vue
             |                        |               app script located at
             |                        |             /proxy/5050/src/main.ts)
             |                        |                       |
             |                        |  200 OK (index.html)  |
             |                        |<----------------------|
             |  200 OK (index.html)   |                       |
             |<-----------------------|                       |
             |                        |                       |
      Now, I need the                 |                       |
       main.ts file                   |                       |
             |                        |                       |
             | GET /proxy/5050/src/main.ts                    |
             |----------------------->|                       |
             |                        |                       |
             |               Removes /proxy/5050/             |
             |                 prefix from path               |
             |                        |                       |
             |                        |    GET /src/main.ts   |
             |                        |---------------------->|
             |                        |                       |
             |                        |           I know /proxy/5050/src/main.ts
             |                        |               but not /src/main.ts
             |                        |        Lets send a 404 with an error message.
             |                        |            (No redirect in this case.)
             |                        |                       |
             |                        |       ERROR 404       |
             |                        |<----------------------|
             |        ERROR 404       |                       |
             |<-----------------------|                       |

Suggested solution

Vite dev server should allow us to indicate a REVERSE_PROXY_BASE_URL, in addition of the BASE_URL:

• BASE_URL:
  • Changes the resources include paths in the source files (prepend with /proxy/5050/)
    • <script src="/proxy/5050/src/main.ts"> from the browser's perspective.
  • Changes the resources location on the server (/proxy/5050/)
    • GET /proxy/5050/src/main.ts to retrieve the resources.
• REVERSE_PROXY_BASE_URL:
  • Would change the resources include paths in the source files (prepend with /proxy/5050/)
    • <script src="/proxy/5050/src/main.ts"> from the browser's perspective.
  • Would NOT change the resources location on the server (/)
    • GET /src/main.ts to retrieve the resources (would work from the proxy's perspective)

We could set both variables:

• BASE_URL="/base/"
• REVERSE_PROXY_BASE_URL="/proxy/5050/"

In this case, if both variables are set:

• <script src="/proxy/5050/base/src/main.ts"> from the browser's perspective.
• GET /base/src/main.ts to retrieve the resource (from the proxy).

Alternative

A temporary workaround is to avoid using the Vite dev server in this case—at the cost of a bad developer experience.

Build the app, and use a third-party static server to serve the dist/ directory from the / url:

# Configure vue/vite with a base path of "/proxy/5050/"
# We then build and serve the app on "/":

$ npm run build
$ cd build
$ python -m http.server 5050

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[titouandk]

(Edit: Variable name changed to REVERSE_PROXY_BASE_URL in my previous message.)

[sapphi-red]

I guess you can tell the reverse proxy to not to strip the prefix. If that's not acceptable for some reason, probably setting base to / only for dev would work (base: command === 'build' ? '/' : '/proxy/5050/').