How to debug 400 bad request?

[igorlanko]

Hello,

Just installed and signed up for the Cloudinary, trying to figure out how to get it going. My media files are stored on Supabase, so using supabase-cloud env variables I'm trying to start this up locally like so:

<!-- Works -->
<img src={`https://res.cloudinary.com/${BUCKET_ID}/image/fetch/w_300,c_fill/${artifact.src}`} alt={artifact.caption} />

<! -- Throws 400 bad request -->
<CldImage
  layout="fullWidth"
  src={artifact.src}
  alt={artifact.caption}
  height="auto"
/>

However using the component specifically I'm getting bad request in the browser:

Not sure how could I further debug this? Dev terminal doesn't have any errors. These are the variables I have in both .env and env.local:

VITE_PUBLIC_CLOUDINARY_CLOUD_NAME=
VITE_PUBLIC_CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

This is probably something stupidly simple I just can't seem to figure it out!

Initially I thought maybe you can't make requests on localhost, but just using <img> seems to work? Could you give me a clue? Thanks!

[colbyfayock]

hey @igorlanko a good way to debug errors like that is to look in the Network tab, and the headers of the request. specifically, x-cld-error

check out this video: https://www.youtube.com/watch?v=ERurOuYT_WA&list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8&index=53

[igorlanko]

Thanks so much! This is very helpful. The header response was: Invalid transformation component - https:. Looks like that's because I'm passing a public url from Supabase storage to the src, while the library expects me to already have that file in the Cloudinary storage?

Anyway, this is probably not related to the library itself.

[colbyfayock]

@igorlanko yeah thats the default behavior to use the Cloudinary ID, however, we have a different delivery type called "fetch" which allows you to take a remote URL and pass it through

you can try this by setting deliveryType="fetch"

note: if you get errors, you may need to update your Security settings to allow Fetch (checkbox), where I'd also recommend restricting fetch requests to only your Supabase storage

[igorlanko]

@colbyfayock, it works!! Thanks so much!

Would you mind clarifying, when you're talking about restricting fetch requests to the Supabase storage, do you mean on the SvelteKit side in CSP or in Cloudinary settings?

[colbyfayock]

Cloudinary settings. That way someone can't pass in just any URL and it would work

[igorlanko]

Thank you so very much again!