web-dev-qa-db-ja.com

Nginxはcssファイルのロードに失敗します

最近、Apache2からNginxに切り替えることにしました。 CentOSサーバーにNginxをインストールし、基本構成をセットアップしました。ブラウザ（FF/Chrome）でサイトをロードしようとしたときに、cssファイルがロードされていないことに気付きました。エラーコンソールを確認すると、次のメッセージが表示されました。

Error: The stylesheet http://example.com/style.css was not loaded because its MIME type, "text/html", is not "text/css".

私はNginxの設定をチェックしましたが、すべてがうまくいくようです：

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

CssファイルのMIMEタイプは、/ etc/nginx/mime.typesで正しく設定されています。

text/css css;

すべてが適切に構成されているようですが、私のcssファイルはまだロードされていません。説明はありません。

言及する価値があるもう一つのこと。最初に、epelリポジトリを使用してNginxをインストールし、古いバージョン0.8を取得しました...問題はそのバージョンのバグであるように見えたため、0.8バージョンをアンインストールし、nginxリポジトリをyumに追加してから、最新バージョン1.0をインストールしました。 14。新しいバージョンで問題が解決すると思っていましたが、残念ながら解決しなかったので、アイデアが足りません。

私は助けに感謝します。

構成ファイル：

/ etc/nginx/nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

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

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

/ etc/nginx/conf.d/default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/Host.access.log  main;

    location / {
         root    /usr/share/nginx/html;
         index  index.html index.htm index.php;
         fastcgi_pass   127.0.0.1:9000;
         fastcgi_index  index.php;
         fastcgi_param  SCRIPT_FILENAME  /usr/share/nginx/html$fastcgi_script_name;
         include        fastcgi_params;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

/ etc/nginx/mime.types

types {
    text/html                             html htm shtml;
    text/css                              css;
    text/xml                              xml;
    image/gif                             gif;
    image/jpeg                            jpeg jpg;
    application/x-javascript              js;
    application/atom+xml                  atom;
    application/rss+xml                   rss;
    ..........................................
    other types here
    ..........................................
}
cssnginxmime
62
user337620

Webで回避策を見つけました。 /etc/nginx/conf.d/default.confに次を追加しました。

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

問題は、ルートが正しく設定されていないかのように、cssファイルへのリクエストが適切にリダイレクトされないことです。 error.logに表示されます

2012/04/11 14:01:23 [エラー] 7260＃0：* 2 open（） "/etc/nginx//html/style.css"

そこで、2番目の回避策として、定義済みの各場所にルートを追加しました。現在は動作しますが、少し冗長なようです。ルートは/ locationから継承されていませんか？

30
user337620

include /etc/nginx/mime.types;の下ではなくlocation / {の下にhttp {を置くと、問題が解決しました。

76
Amnon

style.cssは、実際には "location /"ディレクティブのためにfastcgiを介して処理されています。そのため、ファイルシステム（nginx > fastcgi > filesystem）ではなく、ファイル（nginx > filesystem）を提供するのはfastcgiです。

私がまだ理解していない理由のために（どこかにディレクティブがあると確信しています）、NGINXは、バックエンドアプリケーションが明示的に別の方法で指示しない限り、MIMEタイプtext/htmlをfastcgiから提供されるものに適用します。

犯人は、特にこの構成ブロックです。

location / {
     root    /usr/share/nginx/html;
     index  index.html index.htm index.php;
     fastcgi_pass   127.0.0.1:9000;
     fastcgi_index  index.php;
     fastcgi_param  SCRIPT_FILENAME  /usr/share/nginx/html$fastcgi_script_name;
     include        fastcgi_params;
}

そのはず：

location ~ \.php$ { # this line
     root    /usr/share/nginx/html;
     index  index.html index.htm index.php;
     fastcgi_split_path_info ^(.+\.php)(/.+)$; #this line
     fastcgi_pass   127.0.0.1:9000;
     fastcgi_index  index.php;
     fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name; # update this too
     include        fastcgi_params;
}

この変更により、*.phpファイルのみがfastcgiから要求されるようになります。この時点で、NGINXは正しいMIMEタイプを適用します。 URLの書き換えが発生している場合、これを処理してbefore位置ディレクティブ（location ~\.php$）を処理し、正しい拡張子が適切に導出されるようにする必要がありますfastcgiにルーティングされます。

必ず try_filesを使用したセキュリティに関するその他の考慮事項に関するこの記事 を確認してください。セキュリティへの影響を考えると、これはバグではなく機能だと考えています。

19
zamnuts

私もこの問題に遭遇しました。間違っていることに気付くまで混乱していました。

これがあります：

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

あなたはこれを求めている：

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

nginxにバグがあるか、ドキュメントに欠陥があるようです（これは意図された動作かもしれませんが、奇妙です）

10
Jonathan Vanasco

私は残りの回答からいくつかのヒントに従い、これらの奇妙な行動が助けになったことを発見しました（少なくとも私の場合）。

1）サーバーブロックに以下を追加しました。

location ~ \.css {
 add_header Content-Type text/css;
}

私はnginxをリロードし、これをerror.logに記録しました：

2015/06/18 11:32:29 [エラー] 3430＃3430：* 169 open（） "/etc/nginx/html/css/mysite.css"が失敗しました（2：そのようなファイルまたはディレクトリはありません）

2）行を削除し、nginxをリロードして、動作中のcssを取得しました。 confファイルが以前のようになったために何が起こったのか説明できません。

私の場合は、VirtualBox上のxubuntu 14.04、nginx/1.9.2、/ etc/hostsの行127.51.1.1 mysite、およびサーバーブロックを使用した非常に単純な/etc/nginx/nginx.confでした。

user nginx;
worker_processes 1;

error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include /etc/nginx/mime.types;

    server {
        listen 80;
        server_name mysite;

        location / {
            root /home/testuser/dev/mysite/;
        }
    }
}
1
unVerum

Windowsでも同じ問題が発生しました。以下を追加して解決しました：include mime.types;underhttp {in私のnginx.confファイル。その後、それはまだ動作しませんでした.. error.logファイルを見て、.cssファイルとjavascriptファイルをファイルパスから充電しようとしていることに気付きましたが、/ httpフォルダが。例：私の.cssは「C：\ Users\pc\Documents\nginx-server/player-web/css/index.css」にあり、「C：\ Users\pc\Documents\nginx」から取得していました-server/html/player-web/css/index.css "だから、htmlフォルダー内のplayer-webフォルダーを変更しました;）

0
nachoreimat

ブラウザでサイトを完全に更新する必要があります。 ctrl + f5を使用して更新し、誤ったヘッダーを持つキャッシュファイルを取得しないようにします。

0
Masih Jahangiri

私は実際にこのページで上記のすべての答えを調べましたが、役に立ちませんでした。次のコマンドを使用して、たまたまディレクトリとサブディレクトリの所有者と権限を変更しました。次を使用して、/usr/share/nginx/htmlのWebプロジェクトディレクトリの所有者をrootユーザーに変更しました。

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

最後に、次を使用してそのディレクトリとサブディレクトリのアクセス許可を変更しました。

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

NOTE：拒否された場合、Sudoを使用できます

0
Young Emil

私は同じ問題を抱えていましたが、上記のいずれも違いはありませんでした。

location ~ [^/]\.php(/|$) {
fastcgi_split_path_info  ^(.+\.php)(/.+)$;
fastcgi_index            index.php;
fastcgi_pass             unix:/var/run/php/php7.3-fpm.sock;
include                  fastcgi_params;
fastcgi_param   PATH_INFO       $fastcgi_path_info;
fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
** The below is specifically for moodle **
location /dataroot/ {
internal;
alias <full_moodledata_path>; # ensure the path ends with /
}
0
Alex M