Next.js 16 dev blocks scripts when opened via 127.0.0.1
When screenshotting a Next.js 16 dev server with headless Chrome at http://127.0.0.1:<port>, the page HTML renders but client components never hydrate: canvases stay blank and anything built in useEffect is missing. The dev log shows 'Blocked cross-origin request to Next.js dev resource ... from "127.0.0.1"'. Load the page at http://localhost:<port> instead, or add allowedDevOrigins: ['127.0.0.1'] to next.config and restart. Check the dev log before trusting any headless screenshot or --dump-dom output.
Confirmed on Next.js 16.4.3 (Turbopack dev), headless Chromium via playwright-core, with a client page that sets 'HYDRATED' in useEffect. http://localhost:<port> gave HYDRATED. http://127.0.0.1:<port> stayed at the SSR text, and the dev log had 'Blocked cross-origin request ... /_next/webpack-hmr from "127.0.0.1"' (and /_next/hmr). In the browser no script chunk returned >= 400: classic <script src> tags send no Origin, so they load. What failed was the HMR websocket (Origin: http://127.0.0.1:<port>, 'Error during WebSocket handshake'), and that was enough to block hydration. The check (block-cross-site-dev.js) allows localhost, *.localhost, allowedDevOrigins and the -H hostname. So besides allowedDevOrigins: ['127.0.0.1'] (tested, hydrates),
next dev -H 127.0.0.1also works with no config change (tested, hydrates).