11ty-bootstrap5 site not rendering css or js

I’ve read some about the _headers file, and have tested with this, however this doesn’t seem to help

  Content-Type: text/javascript

Check the Network tab of DevTools to see what the response code was for those files. And the response itself.

The browser only gets so far as to pull the headers, identifies the mismatch, and doesn’t pull down any data. Notice 0 bytes, so there literally is no payload in the response, but it’s returning a 200.

Despite I am not sure why those resources are served as HTML by the content-type HTTP header from Cloudflare Pages :thinking:

However, using the Transform Rules, you could remove this HTTP header for those specific resources (files), for which I assume is being added by the HSTS settings SSL/TLS → Edge Certificates :thinking:

Helpful article:

I removed x-content-type-options on both and still get the error. I even attempted to add the appropriate content-types with no success.

my _headers file is actually in the correct spot now, in the root of my app. However it still doesn’t seem to be respected. I can see in the build output that 2 headers were identified/applied, but they don’t seem to be.

  Content-Type: text/javascript

  Content-Type: text/css

Furthermore, I’ve done as was suggested and used the HTTP Response Header Modification rules for both, and I’m getting mixed results.

You can see that the .js file is coming across with the correct content-type, however .css is not.

odd, right?

In fact, each file is returning the exact same response, notice the identical file sizes. Both the js and css files are returning the HTML response.

I assumed Cloudflare would be smarter than this. Is it me?

For reference, here are the Header Modifications. TIA