MIME Type Issues on Static Site with API Calls - CSS & JavaScript Not Loading

1

Hello everyone, I’m hosting a static website on Render that relies on JavaScript API calls to render data dynamically on the DOM. However, I’m facing persistent issues where the CSS and JavaScript files are not loading correctly due to MIME type errors.

1.	CSS MIME Type Issue:
•	The CSS file located at /styles/style.css is not loading, and the browser gives this error:

Refused to apply style from ‘https://.onrender.com/styles/style.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

•	I’ve configured custom headers on Render to set the Content-Type for this path to text/css, and also tried using a wildcard path /styles/*, but the MIME type still defaults to text/plain.

2.	JavaScript Not Loading:
•	The JavaScript, located at /functionalities/global/main.js, isn’t executing, causing only the HTML structure to load without any dynamic content.
•	I set the Content-Type header to application/javascript for this file, but it seems Render isn’t applying it correctly.

Troubleshooting Steps Taken:

•	Confirmed Paths and Naming: All paths and file names (e.g., /styles/style.css and /functionalities/global/main.js) are correct and in lowercase, matching the HTML references.
•	Header Settings: Configured headers on Render with Content-Type: text/css for CSS files and Content-Type: application/javascript for JavaScript files.
•	Wildcard Paths: Tested using wildcard paths like /styles/* and /functionalities/global/* to apply headers broadly, but this didn’t resolve the issue.
•	Cache and Refresh: Cleared the browser cache and performed hard refreshes multiple times to ensure the latest headers are applied.
•	Direct File Access: Checked each file’s direct URL (e.g., https://<my-site>.onrender.com/styles/style.css) to confirm they’re accessible, but they still show text/plain as the MIME type.
•	Directory Structure: Verified the file structure locally and on Render to ensure paths are consistent.

Could anyone provide additional guidance on enforcing the correct MIME types for static assets on Render or any other solutions for ensuring JavaScript and CSS files load properly on a static site with API calls?

Thanks in advance for any help!

2

Hi,

The MIME type being “text/plain” is likely correct, as I would guess if you visit the asset path directly, the platform is showing just “Not found”. Which is normal for Static Sites, where the asset path is incorrect.

You’ll need to check the structure of your static site and assets within it. If that’s done via a build script, it can help to run it locally. Static Site paths will also be case-sensitive.