Turning On Proxy Doesn't Load CSS, JS and Images on My Website

I’m using Cloudflare. However, when the proxy is turned on, it breaks CSS and js. Even images are also not being loaded. This problem is also happening with R2. I’m using Cloudflare R2 with a custom domain to store images on my website. However, it seems, the images are not loading. This problem appeared yesterday. I have changed the SSL status from Full (Strict) to Full and turned on the development mode but nothing changes.

It prevents R2 to load objects with the custom domain but the *.r2.dev subdomain works fine.

Open your browser dev tools and check the errors it’s throwing. Your server is returning both CSS and Javascript files with a mime type of text/html. This is a misconfiguration at your origin server.

You’re right about the error but I don’t think it’s a problem with my origin server. When the proxy is disabled, my site runs without any error and this problem started yesterday. Moreover, the object storage is also not working (1st comment). It works with the *.r2.dev subdomain but not with my custom domain. Additionally, Cloudflare pages are also not working. It works with *.pages.dev subdomain but not with my custom domain even though they are configured to show the same content. Surely, it’s from Cloudflare’s end.

Something in your domain’s Cloudflare config is changing the response headers. Look at the difference between the HTTP headers on your pages.dev versus the cfpages custom domain. Do you have a _headers file or any kind of page or caching rules set up?

I’m neither using workers nor having any page or caching rules. This problem appeared suddenly. I’m using Cloudflare for a long time but it was yesterday since the problem appeared.

On Cloudflare’s status page, the statuses of several datacenters are “re-routed”. Do you think that could be the issue?

That’s not a very good idea, as you are disabling security by that. Change that back to Strict.