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.