website in ifram doesnt work

[deft plinth]

<iframe src="https://flavibot.xyz" referrerpolicy="no-referrer" sandbox="allow-scripts"></iframe>

Access to script at 'https://flavibot.xyz/_nuxt/izr2uObk.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[polar nimbus]

Hi @deft plinth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The knowledge sources only mention CORS in general and in relation to Nuxt dev server / proxies, not your specific iframe case, so I can only answer at a high level.

What’s happening:

• Your iframe is loaded with sandbox="allow-scripts" and referrerpolicy="no-referrer".
• The page inside the iframe (<https://flavibot.xyz>) then tries to load its own script (<https://flavibot.xyz/_nuxt/izr2uObk.js>).
• The browser treats this as a cross-origin request from an opaque origin (null), and since the script response does not include Access-Control-Allow-Origin, it’s blocked by CORS.

From the Nuxt side, there’s no special setting documented to bypass this; CORS must be allowed by the server that serves <https://flavibot.xyz/_nuxt/….> Similar issues are described where third‑party APIs or cross‑site dev servers must explicitly allow the origin via CORS headers, or you must proxy through your own server instead.[3rd‑party CORS; CORS/proxy]

Given the docs:

• Devtools iframes only work “when the iframe [is] served with the same origin (CORS limitation)”.[Devtools iframe]
• Nuxt’s own dev server recently tightened CORS and cross‑site access, controlled by a devServer.cors option, but that only affects your own Nuxt dev server, not an external site you embed.[v3.15.3 changelog; webpack no‑cors]

So, based on the available information, your options are:

1. Change the sandboxing (if you control the parent page)
   Removing or relaxing sandbox (or adding more flags like allow-same-origin) may avoid the opaque null origin, but this is not covered explicitly in the Nuxt docs, so I can’t give a Nuxt‑specific recipe.

2. Have flavibot.xyz send proper CORS headers
   The server at flavibot.xyz would need to include Access-Control-Allow-Origin (e.g. * or your embedding origin). The knowledge sources only state in general that CORS must be configured on the API/server side.[3rd‑party CORS]

3. Proxy through your own server
   As suggested for external APIs, you can proxy requests through your own backend (e.g. a Nuxt server route) so the browser only talks to your origin, and your server talks to flavibot.xyz.[CORS/proxy]
   However, the sources don’t show a concrete Nuxt code example for proxying this exact case.

Because the knowledge sources don’t include a specific Nuxt configuration or code sample for fixing CORS on an embedded external Nuxt site, I can’t provide a precise Nuxt config snippet. The core requirement is: the server hosting <https://flavibot.xyz> (or a proxy you control) must be configured to allow the embedding context via CORS, and/or the sandboxing must be adjusted.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@deft plinth Kapa.ai is still learning and improving, please let me know how I did by reacting below.