MERN Unable to view photos CORBS and other errors?

JavaScript
1

Hi,

I am currently unable to view my photos in my site. I created a MERN stack application and have the api with a Render web service. My frontend with a Render static site. In my site users are able to create blog posts and upload photos with the posts. Yesterday I noticed the errors below in Firefox and today I am unable to view the photos of the blog posts on the site the CORBS error. The only photos that are viewable are the posts that were created locally. The posts created on the site are not viewable. I would appreciate any help since I need to submit project soon.

Yesterday Firefox Console

Cookie “_cfuvid” has been rejected for invalid domain.     examplephoto.jpg
Cookie “__cf_bm” has been rejected for invalid domain.    examplephoto.jpg

Today in Static Site

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://*website name*.onrender.com/public/images/posts/geocache-gaaac0b46a_1920.jpg with MIME type text/html.

Thanks!

2

What is you site address or have you inspected the developer tools for a error code etc… check settings to see that your not blocking images but unless their all not showing up it has to be a coding bug. Also Cloud flare issues security certificates, make sure its valid. GL

3

We need to see your code.

It looks like you have the wrong MIME type for the images.

https://www.chromium.org/Home/chromium-security/corb-for-developers/

https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#determining-whether-a-response-is-corb_protected

X-Content-Type-Options: nosniff may have been set and have something to do with it.

The sniffing is necessary to avoid blocking existing web pages that depend on mislabeled cross-origin responses (e.g. on images served as text/html). Without sniffing CORB would block around 16 times as many responses.

4

Here is my GitHub link

I was able to create a new post on the site with a photo and the photo is viewable. I just don’t know why the others are no longer viewable. I also don’t know where I should setup the mimetype. I am using Formidable for photo upload

5

Where is it deployed? The host might have something to do with the headers set.

6

On Render. I was thinking it may be a Render issue since as far as I know I am not using cloudflare but I wanted to ask to be sure. I need to have this project deployed and I’m not sure where else I can turn to.

7

I was able to get into contact with render support. It turns out that I need to include a disk in order to persist data (this case photos) across deploys Disks | Render · Cloud Hosting for Developers

Also, as for the other errors they are Cloduflare cookies which is a service that Render uses. They said it may be due to the “onrender.com” domain and I should not worry about it. Thanks for the help!