#Dynamic image cors issue

8 messages · Page 1 of 1 (latest)

modern ridge
#

Having issues with cors on digitalbrewstudios website with this code.

near plazaBOT
#

Hi @modern ridge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The knowledge sources you provided only describe Astro’s security.checkOrigin setting, which is about CSRF protection for SSR/on‑demand pages, not general CORS or image loading. [config security]

From these docs we know:

  • Astro, by default, checks the Origin header for certain non‑GET requests (POST, PATCH, DELETE, PUT) with specific content types and will return 403 if the origin doesn’t match. [config security]

  • This behavior can be disabled with:

    // astro.config.mjs
export default defineConfig({
  output: "server",
  security: {
    checkOrigin: false,
  },
});

    [config security]

However, there is no information in the knowledge sources about:

  • CORS headers for dynamic images,
  • how Astro handles image responses with CORS,
  • or any configuration specific to your “digitalbrewstudios” site or the code you mentioned.

So, based only on the docs:

  • If your “dynamic image” endpoint is an SSR/on‑demand route that uses POST, PATCH, DELETE, or PUT with one of the listed content types, a 403 might be coming from security.checkOrigin. In that case, you can temporarily disable it as shown above to test whether this is the cause.
  • If your issue is about standard CORS (e.g., Access-Control-Allow-Origin for <img> tags or fetch requests), the knowledge sources do not describe how to configure that in Astro, so I can’t give a reliable, doc‑based solution.
#

If you can share the specific Astro route or component code you’re using for the dynamic image, I can try to map it more precisely to what the security option affects, but anything beyond that would go beyond what the current docs explicitly state.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@modern ridge Kapa.ai is still learning and improving, please let me know how I did by reacting below.

modern ridge
near plazaBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

The knowledge sources you provided only cover how to authorize remote images for optimization in Astro via image.domains and image.remotePatterns. They do not mention CORS behavior, headers, or how to fix CORS issues for dynamic images. [Images guide]

From the docs we can say:

  • Astro lets you configure which remote image hosts are allowed to be optimized:

    // astro.config.mjs
export default defineConfig({
  image: {
    domains: ['astro.build'],
    // or:
    remotePatterns: [{ protocol: 'https' }],
  },
});

    [Images guide]

  • Remote images that are not authorized will still load via <Image />, but won’t be optimized; this is unrelated to CORS. [Images guide]

The docs do not explain:

  • How to configure CORS headers for dynamic image routes.
  • How Astro interacts with CORS on external services (like your DigitalBrewStudios setup).

Because of that, I can’t reliably diagnose or fix your “dynamic image CORS issue” from the official docs alone.

To move forward, please paste the actual code you mentioned (route/component and any Astro config). I can then at least point out where image.domains / image.remotePatterns might be relevant, but any CORS-specific advice would go beyond what the current knowledge sources explicitly document.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: