`vite.server.allowedHosts` Set To `true` Rejects All Hosts (except When `localhost`-like Or HTTPS)

by ADMIN 99 views

vite.server.allowedHosts set to true rejects all hosts (except when localhost-like or HTTPS)

When working with Nuxt and Vite, it's essential to understand the configuration options available to us. One such option is vite.server.allowedHosts, which is set to true by default in Nuxt. However, as we'll explore in this article, setting this option to true can lead to unexpected behavior, especially when accessing the Nuxt app from a non-localhost-like host without https. In this article, we'll delve into the issue, provide a reproduction of the problem, and discuss the implications of this behavior.

Before we dive into the issue, let's take a look at the environment in which this problem occurs.

  • Operating System: Windows_NT
  • Node Version: v22.10.0
  • Nuxt Version: 3.16.0
  • CLI Version: 3.22.5
  • Nitro Version: 2.11.6
  • Package Manager: npm@10.9.0
  • Builder: -
  • User Config: compatibilityDate, devtools, vite
  • Runtime Modules: -
  • Build Modules: -

To reproduce this issue, you can follow these steps:

  1. Clone the repository from Stackblitz: https://stackblitz.com/edit/github-sqsfupgq?file=nuxt.config.ts
  2. Install the dependencies by running npm i
  3. In your OS's hosts file, point local.example.com to 127.0.0.1
  4. Run npm run dev
  5. Visit http://local.example.com:3000/

When vite.server.allowedHosts is set to true in nuxt.config.ts, it should not perform any host checks according to Vite's documentation. However, when accessing the Nuxt app from a non-localhost-like host without https, Nuxt returns the following error message:

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

This behavior is unexpected, as the vite.server.allowedHosts option is set to true, which should disable host checks.

In my use case, I'm putting Nuxt behind a reverse proxy that filters for the inbound Host header. This means that Nuxt's allowedHosts filtering is redundant and unnecessary. By setting vite.server.allowedHosts to true, I can avoid having to edit the Nuxt config during development to allow specific hosts through, which would leave my Git changes permanently dirty.

In conclusion, setting vite.server.allowedHosts to true in Nuxt can lead to unexpected behavior when accessing the app from a non-localhost-like host without https. This issue is not reproducible within Stackblitz directly, as Stackblitz accesses the app from https. To reproduce the issue, you'll need to download the repository from Stackblitz locally and follow the steps outlined above.

As a workaround, you can set vite.server.allowedHosts to false in nuxt.config.ts and configure your reverse proxy to filter for the inbound Host header. This will ensure that Nuxt's allowedHosts filtering is not redundant and unnecessary.

To improve this issue, Nuxt could consider adding a configuration option to disable allowedHosts filtering entirely. This would allow developers to opt-out of this feature and avoid the unexpected behavior described above.

I would like to thank the Nuxt community for their help and support in reproducing and understanding this issue.
vite.server.allowedHosts set to true rejects all hosts (except when localhost-like or HTTPS) - Q&A

In our previous article, we explored the issue of vite.server.allowedHosts being set to true in Nuxt, which can lead to unexpected behavior when accessing the app from a non-localhost-like host without https. In this article, we'll answer some frequently asked questions related to this issue.

A: The purpose of vite.server.allowedHosts is to specify which hosts are allowed to access the app. By default, it's set to true, which means that only localhost-like hosts and https hosts are allowed to access the app.

A: Nuxt sets vite.server.allowedHosts to true by default to ensure that only trusted hosts can access the app. This is a security feature to prevent unauthorized access to the app.

A: When vite.server.allowedHosts is set to true and you access the app from a non-localhost-like host without https, the app will return an error message indicating that the host is not allowed.

A: To reproduce this issue, you can follow these steps:

  1. Clone the repository from Stackblitz: https://stackblitz.com/edit/github-sqsfupgq?file=nuxt.config.ts
  2. Install the dependencies by running npm i
  3. In your OS's hosts file, point local.example.com to 127.0.0.1
  4. Run npm run dev
  5. Visit http://local.example.com:3000/

A: The workaround for this issue is to set vite.server.allowedHosts to false in nuxt.config.ts and configure your reverse proxy to filter for the inbound Host header.

A: Yes, you can disable vite.server.allowedHosts entirely by setting it to false in nuxt.config.ts. However, this may compromise the security of your app.

A: This issue is specific to Nuxt and may not happen in other frameworks. However, other frameworks may have similar issues related to host filtering.

A: You can report this issue to the Nuxt community by creating a new issue on the Nuxt GitHub repository: https://github.com/nuxt/nuxt.js/issues

In conclusion, vite.server.allowedHosts being set to true in Nuxt can lead to unexpected behavior when accessing the app from a non-localhost-like host without https. We hope that this Q&A article has provided you with a better understanding of this issue and its implications. If you have any further questions or concerns, please don't hesitate to reach out to the Nuxt community.