Nginx无法加载CSS和JS文件（MIME类型错误）？

时间：2015-04-11 02:43:34

标签： css nginx meteor mime-types

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

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

）通过插入＆＃34; 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/*;
}

我必须做错事，因为它仍然无法正常工作。我是否还应该包括＆＃34; root / usr / share / nginx / html; ＆＃34;在 / etc / nginx / sites-available / webmill 的位置部分？

欢迎任何建议，并提前感谢您的帮助！

11 个答案:

答案 0 :(得分：5)

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

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

答案 1 :(得分：1)

Angular 8应用程序=> NGINX

最终，在进行一些挖掘之后，一次删除了一个选项，我设法跟踪了导致控制台中出现MIME类型错误的选项。

我注释掉了，中提琴内容显示得很好。

# This option causes issues with Angular 8 served applications
# add_header X-Content-Type-Options nosniff;

# Include MIME Types
include /etc/nginx/mime.types

希望它对某人有帮助

答案 2 :(得分：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;
  }
}

答案 3 :(得分：0)

好吧，在所有失败的尝试之后，我已经设法通过删除解决了这个问题 从我的代码中链接type =“text / css”，并将css保留为：

from project import app, db

class ExampleTest(unittest.TestCase):
   def setUp(self):
        app.config['TESTING'] = True
        app.config['WTF_CSRF_ENABLED'] = False
        app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite://'
        self.app = app.test_client()
        db.create_all()

答案 4 :(得分：0)

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

numerado

并使用以下方式更改权限：

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

您可以查看my answer here

答案 5 :(得分：0)

检查你的nginx.conf！你有这样的配置：

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

我通过添加这句话修复了这个问题

答案 6 :(得分：0)

尝试验证权限，还检查try_files。 最后，通过添加

使我的布局恢复正常 
"http{
 include /etc/nginx/mime.types;
 sendfile on;
 server {
    listen 443 ssl;
 ....."

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

答案 7 :(得分：0)

手动包含mime.types为我解决了此问题：

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

答案 8 :(得分：0)

我在Angular 5中遇到类似的错误-打字稿和Nginx服务器。

控制台错误

CallableStatement cstmt = conn.prepareCall(sql);
// The driver should expect a PLSQL BOOLEAN type for the first OUT argument
// of the PLSQL procedure:
cstmt.registerOutParameter(1, OracleTypes.PLSQL_BOOLEAN);
cstmt.execute();
...
boolean likeTrump = cstmt.getBoolean(1);

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

对我来说，解决方案只是将基本href更改为

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

到

<base href="">   <-- wrong

就是这样，nginx.conf或其他任何内容都没有更改。

答案 9 :(得分：0)

对于其他遇到此问题的人，我遇到了这个问题，并删除了我的mime.types包括

http {
    include mime.types;
    ...

    server {
        listen: 80
        ...
    }

答案 10 :(得分：0)

对我来说，它起作用了，当我查看我的文件源时，我得到了 nginx 的响应。 显然，我为网站发送的所有请求获取了相同的 html 文件。 因此删除了 try_files 指令并解决了问题。

相关问题
最新问题