Skip to content

Nuxt DevTools causes 404 error on custom HTTPS domain #925

Open

Description

@chrisnoden

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

Logs

Activity

  1. coderabbitai commented on Jan 25, 2026

    @coderabbitai
    Contributor

    📝 CodeRabbit Plan Mode

    Generate an implementation plan and prompts that you can use with your favorite coding agent.

    • Create Plan
    Examples

    🔗 Related PRs

    nuxt/nuxt#31543 - fix(vite): return 404 for non-existent _nuxt/ paths in development [merged]
    nuxt/nuxt#31646 - fix(vite): prevent 404 for existent dev server handlers under _nuxt/ paths in development [merged]
    nuxt/nuxt#33359 - feat(nuxt): display youch error page w/ user error page in dev [merged]
    nuxt/nuxt#33670 - fix(vite): respect vite proxy in dev middleware [merged]


    🧪 Issue enrichment is currently in open beta.

    You can configure auto-planning by selecting labels in the issue_enrichment configuration.

    To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

    issue_enrichment:
      auto_enrich:
        enabled: false

    💬 Have feedback or questions? Drop into our discord!

  2. transferred this issue fromnuxt/nuxton Jan 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions