While a member of our team prepares to jump in, you might find your answer even faster in our community resources.

• Official Documentation: https://v0.app/docs

v0.app

What is v0? | v0 Docs

v0 is an AI agent that helps anyone create real code and full-stack apps and agents.

• The v0 expert walkthrough: https://community.vercel.com/t/become-a-v0-expert/5981
• Watch v0 in Action: https://community.vercel.com/live#v0

Hi Benjamin,

One thing I’d try is adding Astro’s own server.allowedHosts, not only Vite’s vite.server.allowedHosts.

In your config you currently have:

1
server: {
2
  host: true,
3
},
4
vite: {
5
  server: {
6
    allowedHosts: true,
7
    cors: true,
8
  },
9
}
10

but Astro also has a top-level server.allowedHosts option. If the v0 web preview request is being rejected before it reaches the Vite asset/HMR layer, the Vite setting alone may not change the result.

As a temporary isolation test, I’d try:

1
export default defineConfig({
2
  site: "https://friva.at",
3
  server: {
4
    host: true,
5
    allowedHosts: true,
6
  },
7
  security: {
8
    checkOrigin: false,
9
    csp: false,
10
    allowedDomains: [{}],
11
  },
12
  vite: {
13
    plugins: [tailwindcss()],
14
    server: {
15
      allowedHosts: true,
16
      cors: true,
17
      hmr: { clientPort: 443 },
18
    },
19
  },
20
})
21

If that makes the v0 web preview load, I’d narrow the broad settings back down instead of leaving them like that permanently. The browser Network tab should show the actual Host / Origin being used by the v0 preview, and then you can allow only that preview hostname/pattern.

If it still fails, I’d check which request is blocked: the document /, an /_astro/... asset, or the HMR websocket. That will tell you whether this is Astro host/origin validation, Vite asset CORS, or HMR.

Since the mobile preview works but the web preview fails, this may also be specific to the v0 web preview wrapper rather than your Astro production build. The most useful detail to share next would be the failed Network row with cookies/auth headers removed.

Hello,

This issue is common when using v0 with frameworks like Astro. The "Cross-Origin request blocked" error occurs because the browser has strict security policies preventing the preview from accessing your development server.

Instead of weakening security settings (such as disabling checkOrigin or csp), which could compromise your local environment, try the following:

Proxy verification: Ensure that the proxy or tunnel you're using to deploy your local server (such as ngrok or similar) is correctly passing the Origin and Host headers.

Precise CORS settings: Instead of setting the permission to "allowHosts: true" (which allows any host), try specifying the target domain precisely (such as v0.app) in the Vite settings.

Browser check: Sometimes the problem lies with browser extensions (such as ad blockers or security extensions) that might be blocking WebSocket or HMR connections. Try opening the preview in Incognito mode to confirm. Update headers: Ensure your Astro server is correctly sending the Access-Control-Allow-Origin:https://v0.app header.

Trying to allow everything (Allow All) is not a sustainable solution; focusing on how your server recognizes the 'request source' (Origin) is the real key to resolving this issue.