Support server.origin for references in HTML files

[kajic]

Description

The Vite Shared Options documentation for base states:

Full URL, e.g. https://bar.com/foo/ (The origin part won't be used in development so the value is the same as /foo/)

This has turned out to be a problem for me because I serve HTML generated by a Vite SSR server from a server in front of the Vite dev server. In short, a server at http://127.0.0.1:8000 requests HTML from Vite running at http://127.0.0.1:5173/, and the fronting server returns the HTML it got from Vite to the browser. At this point, all URLs in the HTML are relative to http://127.0.0.1:8000, instead of being relative to http://127.0.0.1:5173/, so all static assets on the page fail to load.

If Vite had allowed me to set the base URL to http://127.0.0.1:5173/, the static assets on the page would have correctly referred to http://127.0.0.1:5173/ and everything would have worked, even though I serve the HTML from a different origin.

Suggested solution

Please make it so that Vite respects the origin part of base in development, like it does in production.

Alternative

I currently work around the problem using a Vite plugin that rewrites the Vite generated HTML, introducing the origin in front of the stripped down base path (STATIC_URL here is /static/ and it's also the value that was passed to Vite as base):

base: 'http://127.0.0.1:5137/static/',
plugins: [
  vue(),
  
  // Rewrite static URLs to use the dev server's origin hostname.
  // Fixes static URLs in index.html.
  {
    name: 'static-url-origin',
    transformIndexHtml(html: string) {
      return html.replaceAll('/static/', 'http://127.0.0.1:5137/static/')
    },
  },
],
// Rewrite static URLs to use the dev server's origin hostname.
// Fixes public and module URLs in component <template>.
// Fixes module URLs in component <style>.
// Fixes module URLs in index.css.
// Does not fix public URLs in component <style>.
// Does not fix public URLs in index.css.
server: {origin: 'http://127.0.0.1:5137/static/'},

Additionally, I set server.origin to http://127.0.0.1:5137/static/ to introduce the origin into assets that are included by my Vue components. This fixes the origin for both public and module based assets (i.e. assets from ./src/assets/) referenced from a Vue <template> block. It also fixes module based assets referenced from the component's <style> block.

However, it does not fix public assets referenced from the component's <style> block.
Similarly, it fixes module based assets referenced from index.css, but it does not fix public assets referenced from index.css.

Fortunately, I’m able to work around those last two problems with public assets from <style> and index.css not working by configuring the server in front of Vite to serve static assets from Vite’s public dir.

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.

[sapphi-red]

Would server.origin work for your case?

[kajic]

Would server.origin work for your case?

server.origin only seems to help with assets that are rendered by my Vue components, but unfortunately it doesn't seem to affect Vite's own injected assets such as @vite/client, or any other asset that is part of index.html such as the URL to my entry point script /src/index.ts or a public asset such as /img/favicon.png.

EDIT: I've updated the issue with information about what server.origin helps with, and where it's still short of a complete solution.

[juan-rvty]

Is this planned? It was offered as an alternative to #18612 but the current implementation does not work as expected.