Next.js + Cloudinary, CldUploadWidget not loading due to CORS or cookies or something

Next.js
1

Hi, I’m sure this must be something dumb that I’m overlooking because I seem to be the only person on the internet with the issue of getting the CldUploadWidget to load on a local environment. There are a few similar questions posted with no (meaningful) responses, and in Mosh’s demo there was zero issue at all.

I’m following the Next.js course and I’ve encountered an issue in the Uploading Files section that uses Cloudinary. After following Mosh’s steps, the button appears on the page and clicking it brings up a dialogue, but instead of loading in the rest of the widget, it’s just a loading spinner:

image
image2314×1410 335 KB

You can see in the issues from the developer tab that there is an issue with cross-site cookie stuff:

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute.

If I attempt it in Safari I get this error instead:

Blocked a frame with origin "http://localhost:3000" from accessing a frame with origin "https://upload-widget.cloudinary.com".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

There is a cookie in cache but it has no contents. Looking at the HTML for the page I see this:

<script src="https://widget.cloudinary.com/v2.0/global/all.js" id="cloudinary-uploadwidget-15" data-nscript="afterInteractive"></script>
<iframe frameborder="no" allow="camera" width="100%" height="100%" title="Upload Widget" data-test="uw-iframe" src="https://upload-widget.cloudinary.com/widget/index.html?pmHost=http://localhost:3000" style="border: none; background: transparent; display: block; position: fixed; z-index: 1000000; width: 100%; height: 100%; top: 0px; left: 0px;"></iframe>

so my guess is that the browser is rejecting the iframe because it does not match. I’m not sure how to proceed. I’ve been searching google for a few hours now looking for resolutions but they all require some settings being adjusted in the browser to disregard, which does not seem like an intelligent fix, or have to do with axios or other setup to the server settings that don’t pertain to Next.js, etc.

Any help would be greatly appreciated. This isn’t the first time CORS has been a shot in the foot for me but it is the first time I haven’t been able to find similar enough questions on the internet to troubleshoot it on my own.

2

Update: I was unable to resolve the CORS issue with Cloudinary so I just started working with ImageKit instead. Honestly it works fine for uploading pics to its cloud media storage and displaying them, the only hiccup is that their provided Next.js components are pretty bare bones and had to be assembled first, including spoofing a required auth process with a token and signature.

This is both good and not good, as I was able to sidestep the entire CORS issue by not using a component that had an iframe referencing another website built into it, but it has none of the glitzy features of the Cloudinary widget.

However!

I’m still very interested in the solution to this, if you have any ideas on what else I can try, I’m all ears!

thanks

3

Hello,
I had the same issue and the solution was very easy. My .env file was outside of the “next-app” folder. I moved the .env file inside the next-app and it works fine. I hope this can fix your issue.

4

Hey,

I had the same problem and it turned out the format of my Mysql connection string in the .env file was incorrect. So I had to URL encode the special characters like (“@”, “!”, “^”, and “$”).

You can use something like - https://www.urlencoder.org/ to fix your string and it might just be the solution to the problem.

1 Like