Error: Blocked request. This host is not allowed.
To allow this host, add to
server.allowedHosts
in vite.config.js.5 Replies
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:
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?@kapa.ai Thank you. Where should the vite.config.ts be created?
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:
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?Thank you.
Wohooo @cmilazzo, you just became a Waspeteer level 7!