nuxt / nuxt/devtools

Nuxt DevTools causes 404 error on custom HTTPS domain

Open
#925 1 comment 6 reactions 0 assignees View on GitHub

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 from NuxtDevServer.toNodeHandle
  • Browser console shows cross-origin SecurityError for __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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.