Error 403 "forbidden" when running 'next dev' through stunnel - Next.js ver. 15.2.2

[designly1]

Link to the code that reproduces this issue

https://github.com/designly1/nextjs-15-2-2-stunnel-issue

To Reproduce

1 . Clone repo
2. cd repo
3. pnpm i
4. Setup a stunnnel reverse proxy:

[dev server]
accept = 443
connect = 3000
cert = /path/to/cert.pem
key = /path/to/key.pem

5. Run the dev server pnpm dev
6. Connect via valid SSL domain name
7. Check dev tools console

Current vs. Expected behavior

Expect no errors but get 403 forbidden errors loading resources from /_next

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:23:36 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T8112
  Available memory (MB): 24576
  Available CPU cores: 8
Binaries:
  Node: 20.18.3
  npm: 11.1.0
  Yarn: 1.22.22
  pnpm: 10.5.2
Relevant Packages:
  next: 15.2.2 // Latest available version is detected (15.2.2).
  eslint-config-next: 15.2.2
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack, CSS, Font (next/font), Instrumentation, Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I tested against different canary versions. Issue was introduced in v15.2.2-canary.3. Reverting to v15.2.2-canary.2 fixes the problem. I also tried running next dev without --turbopack and that did not fix the issue.

[jeanzuck]

Same here, I'm facing this problem only when accessing through the Cloudflare tunnel, but not on localhost.

[sjaakbanaan]

Same here via Docker; just upgraded this morning and noticed my fonts were broken because of a 403.

[VAndAl37]

The same problem.
If I use curl, the request is executed correctly:

curl 'https://___MY_DOMAIN___/_next/static/media/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA-s.p.dbbc0746.woff2' 

But when adding the header "Origin" error 403 is occurring:

curl 'https://___MY_DOMAIN___/_next/static/media/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA-s.p.dbbc0746.woff2' \
  -H 'Origin: https://___MY_DOMAIN___'

[hyperscientist]

Same here, both cloudflare and ngrok give me same issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[m-sahebi]

Adding
proxy_set_header Origin null;
to the Nginx config can temporarily solve the issue for me

[sameerxanand]

The 15.3 canary release seems to have better error logging when this happens:

08:22:44 │    _stripped-project-name_ │  ⚠ Blocked cross-origin request from _stripped_.trycloudflare.com. To allow this, configure "allowedDevOrigins" in next.config
08:22:44 │    _stripped-project-name_ │ Read more: https://nextjs.org/docs/app/api-reference/config/next-config-js/allowedDevOrigins

Adding this to my next.config.ts seems to fix the problem with the fonts not loading:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  allowedDevOrigins: ["_stripped_.trycloudflare.com"],
};

export default nextConfig;

But I still get this problem in my console:
EDIT: I just had to restart the dev server to fix this problem.

use-websocket.ts:16 WebSocket connection to 'wss://_stripped_.trycloudflare.com/_next/webpack-hmr' failed: 

[max-degterev]

This also happens when working on website with subdomains: opening subdomain.localhost:3000 will not load any fonts, other static loads fine

[franktasa]

Any workaround to resolve this issue as we work with subdomains