How to Fix Nuxt.js Integrity Errors and 503 Issues Behind Cloudflare

Deploying a Nuxt.js app behind Cloudflare sounded like a solid idea—great caching, global CDN, free SSL, and security features. But once I pushed my SSR build live, I was slapped with two painful problems:

• SRI Integrity Mismatch Errors
• 503 Service Unavailable on _nuxt/*.js chunks

Nothing is more frustrating than a deployment that works locally but breaks in production, especially when the browser throws cryptic integrity warnings like:

Failed to find a valid digest in the 'integrity' attribute...

So I dug deeper, reproduced the issue, figured out exactly what’s going wrong and now I’m sharing the solution so you don’t suffer like I did.

What Went Wrong in My Setup

At first, I configured nuxt-security to enforce CSP and SRI. That’s when things blew up.

The Initial Buggy Config

// nuxt.config.ts (Incorrect Example)
export default defineNuxtConfig({
  modules: ['nuxt-security'],

  security: {
    csp: {
      // WRONG: Hardcoding SHA digests causes mismatch after rebuilds
      scriptSrc: [
        "'self'",
        "'sha384-abc123...'", // These hashes quickly go stale
      ],
    },
    sri: true // Enabled, but Cloudflare may serve cached or modified files
  }
})

Resulting Problems

Final Working Config

Once I understood that static SHA hashes don’t work with continuously rebuilt JS chunks, I switched to nonce-based CSP and auto-SRI handling.

// nuxt.config.ts (Correct Example with Auto-SRI & Cloudflare Safety)
export default defineNuxtConfig({
  modules: ['nuxt-security'],

  security: {
    sri: true, // Let Nuxt auto-handle <script integrity="">
    csp: {
      scriptSrc: ["'self'", "'nonce-{{nonce}}'"], // Stops hash mismatch
      styleSrc: ["'self'", "'unsafe-inline'"] // Needed for Tailwind in dev
    }
  },

  nitro: {
    routeRules: {
      '/**': {
        headers: {
          'Cache-Control': 'public, max-age=0, must-revalidate' // Avoid stale Cloudflare cache
        }
      }
    }
  }
})

Bonus Improvements That Made Everything Stable

Auto Retry Script I Added for Safety

Even with everything fixed, I added a chunk retry safeguard to prevent script failures from causing full app crashes:

<script>
window.addEventListener('error', function (e) {
  if (e.target.tagName === 'SCRIPT') {
    console.warn('Chunk failed, retrying...', e.target.src)
    const newScript = document.createElement('script')
    newScript.src = e.target.src + '?retry=' + Date.now()
    document.body.appendChild(newScript)
  }
}, true)
</script>

Final Thought

I realized that most of my issues weren’t caused by Nuxt itself but by the way Cloudflare handled my assets. Integrity mismatches and 503 errors weren’t bugs in the framework, but side effects of caching and security headers working against each other. Once I let Nuxt manage SRI automatically, switched to nonce-based CSP, and told Cloudflare to stop hoarding my _nuxt files, everything clicked back into place. If you’re facing similar issues, don’t panic it’s not your code, it’s your configuration. A few intelligent tweaks can turn chaos into stability.