server.allowedHosts in vite.config.js

General
1

Strapi 5
node 20
Started in develop mode through pm2, the domain is not localhost, I think it’s the reason I have this issue.
It starts but will not let me access it with the below error:

Blocked request. This host (“x.com”) is not allowed.
To allow this host, add “x.com” to server.allowedHosts in vite.config.js.

I don’t know where I should be placing the vite config file, I tried different option and cannot get it to work.
I install the last version of strapi.
node 20

2

After spending many hours on this issue I’m giving up.

It appears that it is now not possible to run strapi in develop mode on a domain with https, because of the new VITE requirement.

I wanted to have an instance of strapi always running in development mode at a specific domain path.

This configuration will not work an gives the error above. The only way to get it working is through doing run develop on the command line and access strapi through the IP address.
http://x.x.x.x:1337

module.exports = {
        apps: [{
        name: 'devStrapi',
        url: 'https://dev.strapi.com',
        cwd: '/mnt/volume/www/cms',
        script: 'npm',
        args: 'run develop',
        env: {
             NODE_ENV: 'development',
             HOST: '127.0.0.1',
             PORT: 1337,
             DATABASE_HOST: 'x',
             DATABASE_PORT: '3306',
             DATABASE_NAME: 'DB',
             DATABASE_USERNAME: 'user',
             DATABASE_PASSWORD: 'pass',
             DOMAIN_URL: 'https://dev.strapi.com'
             }

Nginx config:

upstream devStrapi {
    server 127.0.0.1:1337; # Matches ecosystem.config.js
    keepalive 64;
}

server {
    listen 443 ssl;
    server_name https://dev.strapi.com;

    access_log /var/log/nginx/dev.strapi.com-access.log;
    error_log /var/log/nginx/dev.strapi.com-error.log;

    ssl_certificate /etc/letsencrypt/live/dev.strapi.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/dev.strapi.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # Forward everything to Strapi
    location / {
        proxy_pass http://devStrapi;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;
    }
}

server {
    # Redirect HTTP to HTTPS
    if ($host = dev.strapi.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name dev.strapi.com;
    listen 80;
    return 404; # managed by Certbot
}


        }
     ]
};
3

Admin panel bundlers | Strapi 5 Documentation has details on how to add to the vite.config.js/ts file. There should already be an example file in your project in the src/admin directory. Rename it from vite.config.example.ts (or js) to vite.config.ts and then replace the existing example config with an entry for server.allowedHosts like you see in the error message.

My entire config (I’m using TypeScript) now looks like:

import { mergeConfig, type UserConfig } from 'vite';

export default (config: UserConfig) => {
  // Important: always return the modified config
  return mergeConfig(config, {
    server: {
        allowedHosts: true,
    },
  });
};

I didn’t see a need for this feature, so I set the value to true, which allows everything. You could replace the boolean with a string containing the value you want to allow.

4

The solution that worked for me (in TS setup) was this (based on the following github issue: [Bug]: Strapi "host is not allowed" error · Issue #5443 · coollabsio/coolify · GitHub).

Add src/admin/vite.config.ts with these contents:

import { defineConfig, mergeConfig } from 'vite';

export default (config) => {
  return mergeConfig(config, defineConfig({
    resolve: {
      alias: {
        '@': '/src',
      },
    },
    server: {
      allowedHosts: true
    }
  }));
};

Then rebuild if needed and restart Strapi. I’m using Strapi v5.12.4.

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.