W
Wasp2w ago
cmilazzo

Error: Blocked request. This host is not allowed.

To allow this host, add to server.allowedHosts in vite.config.js.
5 Replies
kapa.ai
kapa.ai2w ago
Hi @cmilazzo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you're encountering a Vite server error when working with your Wasp application. This error occurs when Vite's security settings are preventing access to resources from hosts that aren't explicitly allowed. This is a common issue when: 1. Using external resources or fonts 2. Accessing your app through a different host than localhost 3. Using tools like ngrok to share your development environment Solution You need to modify your Vite configuration to allow the specific host. In Wasp, you can do this by creating or modifying a vite.config.ts file in your project. Here's how:
import { defineConfig } from 'vite';
import { resolveProjectPath } from 'wasp/dev';

export default defineConfig({
server: {
fs: {
allow: [resolveProjectPath('.')]
},
// Add your host to the allowedHosts array
allowedHosts: ['your-host-name-here']
}
});
import { defineConfig } from 'vite';
import { resolveProjectPath } from 'wasp/dev';

export default defineConfig({
server: {
fs: {
allow: [resolveProjectPath('.')]
},
// Add your host to the allowedHosts array
allowedHosts: ['your-host-name-here']
}
});
Replace 'your-host-name-here' with the host that's being blocked. This solution is similar to how Wasp users solve the Vite serving allow list errors for external resources like fonts, as documented in several community discussions in the Discord support threads. If you're using a custom domain or subdirectory for your app, you might also need to configure the baseDir option in your Wasp configuration as described in the documentation. Let me know if this helps or if you need further assistance! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @cmilazzo, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
cmilazzo
cmilazzoOP2w ago
@kapa.ai Thank you. Where should the vite.config.ts be created?
kapa.ai
kapa.ai2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- The vite.config.ts file should be created in the root directory of your Wasp project. According to the project structure documentation, this is one of the standard files that exists at the project root level. From the project structure documentation:
.
├── .gitignore
├── main.wasp
├── package.json
├── package-lock.json
├── public
├── src
│ ├── Main.css
│ ├── MainPage.jsx
│ ├── vite-env.d.ts
│ └── waspLogo.png
├── tsconfig.json
├── vite.config.ts
├── .waspignore
└── .wasproot
.
├── .gitignore
├── main.wasp
├── package.json
├── package-lock.json
├── public
├── src
│ ├── Main.css
│ ├── MainPage.jsx
│ ├── vite-env.d.ts
│ └── waspLogo.png
├── tsconfig.json
├── vite.config.ts
├── .waspignore
└── .wasproot
When you create a new Wasp project, a default vite.config.ts file is already included at the root level. You can modify this existing file to add your custom configuration, such as the allowedHosts setting we discussed earlier. If you don't see this file in your project, you can create it yourself at the root level (same directory where your main.wasp file is located). Project Structure Documentation Custom Vite Config Documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @cmilazzo, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
cmilazzo
cmilazzoOP2w ago
Thank you.
MEE6
MEE62w ago
Wohooo @cmilazzo, you just became a Waspeteer level 7!

Did you find this page helpful?