Site:
This is a branch deploy with server-side rendering, while the main branch is static. Images are not loading on the preview branch. I think the URLs have parameters and it gets mixed up with the Netlify CDN. How can I disable the Netlify CDN for this deploy, or what should I do to fix this.
i added allowed domain to the astro.config.js, but that did not do anything. For the static site it works.
What’s the domain that you added? I’m seeing rhe domain is not in the allow list.
I did add cloudinary, and cdninstagram. Storyblok is still missing. Images are from multiple images. Local images are loaded correctly.
So adding Storyblock should fix it, I believe?
I’ll try but the other CDNs ate not working , so it doesnt make sense to me.
What do you mean by other CDNs?
Most of the photos are served from cloudinary which is in the allowed domains.
The errors from Cloudinary have nothing to do with Netlify. Did you try contacting them directly?
There could be a problem with the Cloudinary Plugin configuration, and the way it interacts with Astro built-in Picture component, but that could be another problem. On the static site it works since images are not served by the Netlify CDN. On the preview site the Netlify CDN URL is injected, I presume because of it being a server-rendered app.
I understand that since the URL is cloudinary who is not fetching the image from the Netlify CDN, but that makes it complicated. Maybe there is another way? maybe disable the cloudinary plugin for the branch deploy? Is that possible?
Static site example (this works)
“https://res.cloudinary.com/dpqjv4hun/image/fetch/f_auto,q_auto/https://elbikeproject.com/_astro/alpaca-bw_1VqKFV.webp?_a=BBFAAAAA0”
I also added the storyblok, and cdninstagram domain, but I still get 400s for every images served from an external domain.
This is my astro.config.js image domain patterns… maybe this helps in narrowing down the problem. Thanks.
I’m not sure I understand. If the request is being made to res.cloudinary.com, how is this a Netlify question? Netlify doesn’t manage or serve responses for that domain.
I can see that your image URL looks to have the /.netlify/images part in it. So maybe you’re trying to use the Netlify Image CDN, but you’re somehow injecting that URL with Cloudinary?
All that to say, this is:
If you make a request to Netlify and that fails, that’s something we can check.
Those are URLs parsed by the Netlify CDN. They go after /.netlify/images?url= . Which then returns a 400 error. Not sure why the server parses URLs, all images are served by Netlify CDN. That’s why I asked if I can turn it off somehow.
It’s possible it has something do with the way I handled images on the SSR site.
This is not a Netlify URL. The Netlify URL is a part of that:
Assuming you’re talking about that, I believe the issue is because the allowed image Regex generated by Astro, doesn’t match your URL. For example, based on the screenshot you’ve shared, it looks like you’ve followed this documentation: Configuration Reference | Docs (astro.build)
It makes it seem like you should be able to use any subdomain. You’re using a-us subdomain. However, the RegEx generated by Astro is:
https://([a-z0-9]+\\.)*storyblok\\.com(:[0-9]+)?(\\/[^?#]*)?([?][^#]*)?
You can try debugging it here: regex101: build, test, and debug regex. It doesn’t martch your URL because your subdomain has -, while the RegEx is only set to match any lowercase character or any digit, but not special characters.
This should be something filed for Astro. At a minimum, it should at least allow - in the RegEx because - is a valid string in domains. Adding that fixes the issue: regex101: build, test, and debug regex
In your case, till Astro fixes this, you should be able to specify the exact hostname instead of **.storyblok.com to unblock yourself.
This should likely be changed here: adapters/packages/netlify/src/index.ts at main · withastro/adapters (github.com). I’ll also notify the Astro team from our end.
Yes, that was the problem.
Although the cloudinary cdn still returns the following error, it is probably because of cache.
X-Cld-Error:
Error in loading https://preview--elbikeproject.netlify.app/.netlify/images?url=https%3A%2F%2Fa-us.storyblok.com%2Ff%2F1003691%2F2732x2632%2Ffca4f13694%2Falpaca-bw.png&w=2732&h=2632 - 400 Bad Request
For Instagram CDN I will have to apply a fix, because the subdomain keeps changing.
Thank you for the help.
