server.allowedHosts in vite.config.js

General
5

How I fixed the server.allowedHosts in vite.config.js error message in my Strapi project

Intro

I experienced a similar problem whilst I was working on a Strapi project using Gitpod. Each time I ran npm run develop in the Strapi project folder I got the following error message when I visited the Gitpod allocated URL:

Blocked request. This host ("1337-my-strapi-project.ws-eu118.gitpod.io") is not allowed.
To allow this host, add "1337-my-strapi-project-ws-eu118.gitpod.io" to `server.allowedHosts` in vite.config.js.

Project Details

  • Strapi Version: 5.12.7
  • Operating System: Ubuntu 22.04.5 LTS
  • Node Version: Node 22.13.1

After reviewing the comments in this thread I implemented the solution in the following steps.

Step 1

I stopped the Strapi server using CTRL plus C.

Step 2

I navigated to my Strapi project folder and opened up src/admin/vite.config.example.js inside my code editor.

Here is how vite.config.example.js looks before I changed anything:

const { mergeConfig } = require('vite');

module.exports = (config) => {
  // Important: always return the modified config
  return mergeConfig(config, {
    resolve: {
      alias: {
        '@': '/src',
      },
    },
  });
};

Step 3

I added the following snippet:

  server: {
    allowedHosts: true
  },

I added it right after the resolve: { alias... code section. The full file vite.config.example.js now looked like this:

const { mergeConfig } = require('vite');

module.exports = (config) => {
  // Important: always return the modified config
  return mergeConfig(config, {
    resolve: {
      alias: {
        '@': '/src',
      },
    },
    server: {
      allowedHosts: true
    },
  });
};

Step 4

I renamed vite.config.example.js to vite.config.js.

Step 5

I reran the Strapi project. Inside the root of the project folder I ran the following command:

npm run develop

Once the server started, the Strapi Admin Dashboard loads as expected.