Nginx无法加载CSS和JS文件(MIME类型错误)?

问题描述 投票:5回答:9

我的网站上出现以下错误:

Error: There are multiple templates named 'velvet'. Each template needs a unique name. 1b1a247fc034d5089f331ec9540138ff6afd5f39.js:75:306
The stylesheet http://webmill.eu/css/bootstrap.min.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/font-awesome.min.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/velvet.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/custom.css was not loaded because its MIME type, "text/html", is not "text/css".   

在对4个CSS样式表进行了大量研究后,我没有加载我跟踪了一些引导并尝试通过在我的nginx文件中进行更改来修复它(/

等/ nginx的/网站可用/ webmill

)通过插入“include /etc/nginx/mime.types;”在位置/ {:

# HTTP
server {
    listen 80 default_server; # if this is not a default server, remove "default_server"
    listen [::]:80 default_server ipv6only=on;

    root /usr/share/nginx/html; # root is irrelevant
    index index.html index.htm; # this is also irrelevant

    server_name webmill.eu; # the domain on which we want to host the application. Since we set "default_server" previously, nginx will answer all hosts anyway.


    # If your application is not compatible with IE <= 10, this will redirect visitors to a page advising a browser update
    # This works because IE 11 does not present itself as MSIE anymore
      if ($http_user_agent ~ "MSIE" ) {
        return 303 https://browser-update.org/update.html;
    }

    # pass all requests to Meteor
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade; # allow websockets
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header X-Forwarded-For $remote_addr; # preserve client IP
        include       /etc/nginx/mime.types;

        # this setting allows the browser to cache the application in a way compatible with Meteor
        # on every applicaiton update the name of CSS and JS file is different, so they can be cache infinitely (here: 30 days)
        # the root path (/) MUST NOT be cached
        if ($uri != '/') {
            expires 30d;
        }
    }
}

/etc/nginx/mime.types文件都正确并正确调用

/etc/Nginx/Nginx.conf

    user www-data;
worker_processes 4;
pid /run/nginx.pid;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # nginx-naxsi config ##
        # Uncomment it if you installed nginx-naxsi
        ##

        #include /etc/nginx/naxsi_core.rules;

        ##
        # nginx-passenger config
        ##
        # Uncomment it if you installed nginx-passenger
        ##

        #passenger_root /usr;
        #passenger_ruby /usr/bin/ruby;

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

我一定做错了,因为它仍然没有用。我还应该包含“root / usr / share / nginx / html;”在/ etc / nginx / sites-available / webmill的位置部分?

欢迎任何建议,并提前感谢您的帮助!

css nginx meteor mime-types
9个回答
7
投票

尝试将其添加到/etc/nginx/conf.d/default.conf中

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

1
投票

我使用以下项目将项目所有者更改为root:

chown root /usr/share/nginx/html/mywebprojectdir/*

并使用以下内容更改权

chmod 755 /usr/share/nginx/html/mywebprojectdir/*

你可以看看my answer here


0
投票

我从配置中省略了明显的部分以减少重复,这只是基础,你需要从配置添加其他配置,如listen和缓存部分。

server {
  server_name webmill.eu;
  location @proxy {
    proxy_pass          http://127.0.0.1:8080;
    proxy_http_version  1.1;
    proxy_set_header    Upgrade $http_upgrade; # allow websockets
    proxy_set_header    Connection $connection_upgrade;
    proxy_set_header    X-Forwarded-For $remote_addr; # preserve client IP
    include             /etc/nginx/mime.types;
  }
  location /css {
    root /home/ines/development/webmill/app/client/css;
     # try finding the file first, if it's not found we fall
     # back to the meteor app
    try_files $uri @proxy;
  }
  location /js {
    root /home/ines/development/webmill/app/client/js;
     # try finding the file first, if it's not found we fall
     # back to the meteor app
    try_files $uri @proxy;
  }
  location / {
    # I know first condition will always fail but i can't do
    # try files with only 1 option;
    try_files $uri @proxy;
  }
}

0
投票

好吧,在所有失败的尝试之后,我设法通过从我的代码中删除链接类型=“text / css”来解决这个问题,并将css保留为:

<link rel="stylesheet" href="/css/style.css" />

0
投票

检查你的nginx.conf!你有这样的配置:

include /usr/local/nginx/conf/mime.types;

我通过添加这句话来解决这个问题


0
投票

尝试验证权限,还检查try_files。最后,我的布局通过添加恢复正常

"http{
 include /etc/nginx/mime.types;
 sendfile on;
 server {
    listen 443 ssl;
 ....." 

进入“nginx.conf”文件的“http”部分否则,浏览器抱怨css文件被解释为文本而不是样式表。


0
投票

手动包括mime.types为我解决了这个问题:

server {
  ...
  include /etc/nginx/mime.types;
  ...
}

0
投票

我在使用Angular 5 - typescript和Nginx服务器时遇到了类似的错误。

控制台错误

The script from “https://my-server.com/organizations/inline.15670a33298d01750cb3.bundle.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type
SyntaxError: unexpected token: numeric literal

Javascript文件还下载了index.html的内容。另外,当我在页面“https://my-server.com/organizations”并刷新浏览器时,我被发送到“https://my-server.com/organizations/organizations”网址。

我的解决方案就是改变基础href

<base href="">   <-- wrong

<base href="/">   <-- right

就是这样,nginx.conf或其他任何内容都没有变化。


0
投票

对于任何面临这个问题的人,我遇到了这个问题,并删除了我的mime.types包括

http {
    include mime.types;
    ...

    server {
        listen: 80
        ...
    }
© www.soinside.com 2019 - 2024. All rights reserved.