Nuxt DevTools causes 404 error on custom HTTPS domain
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.3k
- Forks
- 214
- Avg merge
- 13h 22m
- Merged PRs (30d)
- 18
Description
Environment
- Nuxt: 4.2.2
- Node: v22.x
- OS: macOS
- Custom domain:
https://custom.domain.local:3000(local HTTPS with self-signed certificate)
Reproduction
Setup
npx nuxi init devtools-https-bug
cd devtools-https-bug
npm install
Generate local certificates
# Using mkcert (recommended)
mkcert -install
mkcert custom.domain.local
Configure nuxt.config.ts
export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
devtools: { enabled: true },
devServer: {
https: {
key: './custom.domain.local-key.pem',
cert: './custom.domain.local.pem',
},
},
})
Add hosts entry
# Add to /etc/hosts (macOS/Linux) or C:\Windows\System32\drivers\etc\hosts (Windows)
127.0.0.1 custom.domain.local
Development Server
Start the development server:
npm run dev
Open https://custom.domain.local:3000 in the browser.
Describe the bug
When running the Nuxt dev server on a custom HTTPS domain (not localhost), DevTools causes repeated 404 errors in the terminal and a cross-origin error in the browser console.
Terminal error:
ERROR [request error] [unhandled] [GET] https://custom.domain.local:3000/_nuxt/
ℹ Error:
⁃ at createError (node_modules/@nuxt/cli/dist/dev-KB30iboK.mjs:54:14)
⁃ at NuxtDevServer.toNodeHandle (node_modules/@nuxt/cli/dist/dev-KB30iboK.mjs:264:18)
[CAUSE]
{
status: 404,
}
Browser console error:
SecurityError: Failed to read a named property '__NUXT_DEVTOOLS_VIEW__' from 'Window': Blocked a frame with origin "https://custom.domain.local:3000" from accessing a cross-origin frame.
at client.js?v=81bfbde2:136:13
Additional context
Expected behavior
DevTools should work without errors on custom HTTPS domains.
Actual behavior
- Terminal shows repeated
/_nuxt/404 errors fromNuxtDevServer.toNodeHandle - Browser console shows cross-origin
SecurityErrorfor__NUXT_DEVTOOLS_VIEW__ - DevTools panel fails to load properly
Workaround
Disabling DevTools eliminates the errors:
devtools: { enabled: false },
Additional context
- Works fine on
https://localhost:3000 - The issue appears to be DevTools probing
/_nuxt/(bare path with trailing slash) which returns 404 - May be related to the fix in nuxt/nuxt#31646, but that fix doesn't seem to cover this case
Logs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce with the HTTPS custom-domain setup in nuxt.config.ts, then inspect NuxtDevServer.toNodeHandle and the DevTools client around NUXT_DEVTOOLS_VIEW. Compare behavior with localhost and run the reported setup. Done means the custom HTTPS domain loads DevTools without repeated /_nuxt/ 404s, cross-origin errors, or a broken panel.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- developer-experience, devtools
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100