Refused to apply style from css because its MIME type ('text/html') is not a supported stylesheet MIME type,

Question

I keep getting the error:

Refused to apply style from 'https://mysitenet/static/css/main.a617e044.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Failed to load resource: the server responded with a status of 503 ()

I have gone through several SO posts which suggest to include js, css in my nginx location .

I followd all those steps, but still unable to resolve the error.

My nginx config is this :

#user  nobody;

worker_processes auto;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}


http {
    # what mime-type to include
    include       /etc/nginx/mime.types;
    # what is the default one
    default_type  application/octet-stream;


   # Sets the path, format, and configuration for a buffered log write
    log_format compression '$remote_addr - $remote_user [$time_local] '
        '"$request" $status $upstream_addr '
        '"$http_referer" "$http_user_agent"';

    sendfile            on;
    keepalive_timeout   10;
    send_timeout        10;
    server_tokens       off;

    # todo: latest nginx release does not bundle gzip
    #gzip_proxied        any;
    #gzip_min_length     1000;
    #gzip_types          *;

    rewrite_log on;

    server {
        listen 80 default_server;
       server_name _;
       return 301 https://$host$request_uri;
    }

    server {

        listen 443 http2 ssl;
        #listen 443 ssl;


         server_name         localhost *.localhost 
 *.amazonaws.com mydomain.net *.mydomain.net;

        access_log /var/log/nginx/access.log compression;

        root   /usr/share/nginx/html;
        
        # what file to server as index
        index index.html index.htm;

        ssl_certificate     ssl/nginx.crt;
        ssl_certificate_key ssl/nginx.key;
        ssl_dhparam                 ssl/dhparam.pem;

        ssl_session_cache           shared:SSL:1m;
        ssl_session_tickets         off;
        ssl_session_timeout         5m;
        ssl_ciphers                 ALL:!EXP:!NULL:!ADH:!LOW:!SSLv2:!SSLv3:!MD5:!RC4;
        ssl_prefer_server_ciphers   on;
        ssl_protocols               TLSv1.2;

        location / {                
            try_files $uri /index.html;
        }

        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }

        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }

        # Any route containing a file extension (e.g. /devicesfile.js)
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }

    }

}

I am creating a nginx container, using docker file and then deploying on AWS cluster.

FROM nginx

ADD ./nginx.conf /etc/nginx/nginx.conf

RUN mkdir -p /etc/nginx/ssl


RUN openssl dhparam -out /etc/nginx/ssl/dhparam.pem 2048
RUN openssl req -x509 -sha256 -nodes -days 3650 -newkey rsa:2048 -keyout /etc/nginx/ssl/nginx.key -out /etc/nginx/ssl/nginx.crt -subj "/C=AU/ST=VIC/L=Melbourne/O=3Ssomething Net /CN=3something.net"



EXPOSE 80 443

COPY ./build/ /usr/share/nginx/html

The docker file is, copying the build output (yarn build) to nginx html folder.

Everything works, but not sure , whats the issue with mimetype and why nginx is not serving the /static/css and /static/js/ files inside my "build" folder.

Probably your main problem is not about MIME types. It is that nginx simply cannot access the files and therefore returns a 503 error page served as `text/html`. — slauth, Sep 10 '21 at 10:40
Your `server_name` looks weird by the way… what's the idea behind that? — slauth, Sep 10 '21 at 10:41
@slauth, server_name is accepting incoming domains. We can server more than once domain on a single server. — Simsons, Sep 10 '21 at 10:44
@slauth, You are right, Let me fix them. Will also remove from the code. — Simsons, Sep 10 '21 at 10:48
Just to give it a try, seprated them with space and did a deployment. Still the same error. — Simsons, Sep 10 '21 at 10:57
Yes this doesn't resolve your actual issue. Did you try to exec into the container and verify there is actually a file at path `/usr/share/nginx/html/static/css/main.a617e044.chunk.css`? — slauth, Sep 10 '21 at 11:03
I am trying to deploy this for the 1st time using ECS , but gitting the hurdle. — Simsons, Sep 10 '21 at 11:29

Refused to apply style from css because its MIME type ('text/html') is not a supported stylesheet MIME type,

0 Answers0