Aastro preview doesn't respect vite preview allowedHostnames in astro config

[andrewflbarnes]

Astro Info

Astro                    v5.1.9
Node                     v22.6.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/starlight

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When running astro preview and visiting the site from another device via the hostname I am met with the below message

Blocked request. This host ("my-hostname") is not allowed.
To allow this host, add "my-hostname" to `preview.allowedHosts` in vite.config.js.

Updating the corresponding part of astro.config.mjs (vite.preview.allowedHosts) does not work, nor does setting it to true or adding a vite.config.js file with this set.

The corresponding property for astro dev (vite.server.allowedHosts) does work.

Note: not reproducible on stackblitz (probably because it forwards direct to the IP).
Can be done with pnpm astro create on the starlight template (unable to check basic template at the moment but suspect it's an issue there too).

astro config:

 export default defineConfig({
   site: "http://my-hostname:54321",
   vite: {
     server: {
       allowedHosts: true,
     },
     preview: {
       allowedHosts: true,
     },
   },
...

package.json scripts

    "dev": "astro dev --port 54321 --host",
    "preview": "astro preview --port 54321 --host",

What's the expected result?

astro preview respects astro config vite.preview.allowedHosts - when I add "my-hostname"/true to this setting I am able to visit the site in a browser at http://my-hostname

Link to Minimal Reproducible Example

https://github.com/andrewflbarnes/bug-astro-preview-allowedhosts

pnpm i
pnpm build
pnpm preview

curl yourhostname:54321

Blocked request. This host ("yourhostname") is not allowed.
To allow this host, add "yourhostname" to `preview.allowedHosts` in vite.config.js.

Participation

• I am willing to submit a pull request for this issue.

[ematipico]

astro preview doesn't use vite under the hoods, you would need to provide those hosts in a different way.

Also, please provide a reproduction. Even if it doesn't work on Stackblitz, we can download it and run it ourselves

[github-actions]

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

[andrewflbarnes]

Thanks for the response @ematipico

astro preview doesn't use vite under the hoods

Should I rename this ticket to something like "incorrect astro preview errors and intellisense for vite preview" given the below?

• the error astro preview reports when visiting the page is to add "yourhostname" to preview.allowedHosts in vite.config.js.
• there is intellisense available on the astro config object for vite.preview... (which aligns with the above error message)

you would need to provide those hosts in a different way.

What is the astro configuration which does this?

I've had a look through the astro docs and done some googling but wasn't able to find any astro config which seemed to address this.

Very possible I missed it since was searching for "allowedHosts" which may have been a red herring given the error message is wrong.

[ematipico]

Yeah, I suppose the bug is that we don't use any preview options on purpose, so maybe we should remove vite.preview from the intellisense

[andrewflbarnes]

What about the other two issues? Namely

• the error message in the response references vite (add "yourhostname" to preview.allowedHosts in vite.config.js.)
• how do I configure astro so that I can make requests using the hostname when serving using astro preview?

[HiDeoo]

maybe we should remove vite.preview from the intellisense

Not sure if this would be good enough. For example, part of my workflow when working on some changes, mostly CSS or a11y related, is to start a dev or prod server, make some changes, and then starting a tunnel, e.g. from cloudflare or ngrok, to share the preview with other devices so I can easily test the changes on a mobile, a Windows machine, etc.

This workflow is no longer possible now since Vite 6.0.9 I guess and there is no way to configure anything like mentioned in the error message so that it can work as before if I'm not mistaken.

[ematipico]

Bjorn mentioned that the preview server uses Vite, but it's more an implementation detail than something that users can configure.

What's your suggestion @HiDeoo?

[HiDeoo]

Bjorn mentioned that the preview server uses Vite, but it's more an implementation detail than something that users can configure.

Definitely, and this is confirmed at the moment by the fact that the following configuration does nothing:

vite: {
  preview: {
    port: 3000,
  },
},

You have to use astro preview --port 3000 instead.

Considering that and the recent Vite server.allowedHosts changes removes a previously supported use case, I think one solution could be to add a --allowed-hosts flag to the astro preview command which would support string[] | true as a value. In this case, the initial recommendation you made to remove it from IntelliSense would totally make sense imo.

Altho, even tho it's an implementation detail right now, I think it's now starting to leak into the user experience as what I consider a relatively common usage, is now showing a Vite error with guidance on how to fix it but following the guidance doesn't work. Not sure if this should be revisited or not as I may not have the full context.

In the meantime, I found a workaround by using the __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS environment variable, e.g.

__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=foo.example.com pnpm astro preview

[cocoonkid]

@HiDeoo thank you so much. I ran into this just a few minutes ago.

[ematipico]

Thank you @HiDeoo , I think your suggestion makes sense to me!

I don't think we need a full fledged RFC for this, so if anyone wants to send PR, you're more than welcome to contribute.

[zhuozhiyongde]

In the meantime, I found a workaround by using the __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS environment variable, e.g.

__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=foo.example.com pnpm astro preview

It doesn't work for bun.

[yagee]

Same issue!
I have twщ projects running on one Ubuntu server, those projects uses different ports 4321 and 4322

But for some reason recently one of my projects failed and instead of my website I can see only message like topic starter:

Blocked request. This host ("my-hostname") is not allowed.
To allow this host, add "my-hostname" to `preview.allowedHosts` in vite.config.js.

With my domain, of cause.

Workaround suggested by @HiDeoo helped, so thank you!

But I thinks it's some kind of bug here

[chardskarth]

I'm running on astro 5.3.0 and I no longer see this issue when adding these line in astro.config.js:

import { defineConfig } from "astro/config";
...
export default defineConfig({
...
  vite: {
    server: {
      allowedHosts: ['<enter host name here>']
    },
  }
})

[robozb]

I'm running on astro 5.3.0 and I no longer see this issue when adding these line in astro.config.js:

import { defineConfig } from "astro/config";
...
export default defineConfig({
...
vite: {
server: {
allowedHosts: ['']
},
}
})

Thank you so much, it helped me, but I can't allow all hosts :( i don't know why :(