did you resolve that??

I think you might want your next.config.mjs to look like this

const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self'
`;

const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
        ],
      },
    ]
  },
};

export default nextConfig;

if you want a more complete definition, maybe this is what youre looking for

const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self'
  connect-src 'self'
  font-src 'self' data:;
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;
`;

thanks for you response @Polar bear, could you explain what that does?

of course

CORS (Cross-Origin Resource Sharing) is a security feature that controls who is allowed to interact with your website or server. It’s like a doorman deciding who gets in and who doesn’t.

Imagine you have an <img> tag on your website, and the image source (src) is from another website (like some random image on the internet). When the browser loads your page, it tries to fetch that image.
At that moment, CORS steps in and says:

'Hey, this image is coming from outside — is it allowed to be here?'

If your website’s CORS policy says only resources from itself ('self') are allowed, then CORS will block that image from loading.

You might think: "But it's just an image, why block it?"
Well, good question — it’s not only about images. Without a CORS policy, someone could sneak in scripts that make dangerous API requests to your backend or database. That's why CORS is so important: it protects your site from external content that could be harmful.

Now, about the code I shared earlier:
By setting the Content Security Policy (CSP) like this:

'self' means only allow content from your own website.

We allow scripts and styles inline (because sometimes Next.js needs that for development).

Images are restricted to load only from your own domain ('self').

In short:
We're telling the browser:

'Only trust resources coming from me (the site itself). Block anything that's not from me unless I specifically allow it.'

This setup helps you avoid random external requests that could mess with your app — especially when you're dealing with API calls or loading assets.

I used chatgpt on my message to help it make it more clear, i have to say that it made a good work ahhaha

this string basically tells from where you allows resources to arrive from

If you want to get informed, CORS should guarantee ( if configured properly ) from CSRF and XSS attack, which could be really malicious for a website

i believe you got the error in production, right? Or atleast after the build. I don't think that in dev mode it should bother

@Polar bear thanks a lot!!

Regardless of whether it is correct nor not, please refrain from sharing LLM responses.

You are welcome