Nginx 无法加载 CSS 和 JS 文件（MIME 类型错误）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29573489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nginx failing to load CSS and JS files (MIME type error)?
提问by Inês B
I'm getting the following errors on my website:
我在我的网站上收到以下错误：
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".
After extensive research on the 4 CSS stylesheets failing to load I followed some leads and attempted to fix it by making changes in my nginx file ( /
在对无法加载的 4 个 CSS 样式表进行广泛研究后，我遵循了一些线索并尝试通过更改我的 nginx 文件（ /
etc/nginx/sites-available/webmill
etc/nginx/sites-available/webmill
) by inserting "include /etc/nginx/mime.types;" under location / { :
) 通过插入“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;
}
}
}
The /etc/nginx/mime.typesfile was all correct and properly called in in
该/etc/nginx/mime.types文件是正确的，并正确调在
/etc/nginx/nginx.conf
/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/*;
}
I must be doing something wrong because it still isn't working. Should I also include "root /usr/share/nginx/html;" in the locationsection of /etc/nginx/sites-available/webmill?
我一定是做错了什么，因为它仍然无法正常工作。我还应该在/etc/nginx/sites-available/webmill的位置部分包含“ root /usr/share/nginx/html;”吗？
Any suggestions are welcome and thanks in advance for any help!
欢迎任何建议，并在此先感谢您的帮助！
回答by Daniel Peterson
for anyone else facing this issues, I had this problem and had removed my mime.types include
对于面临此问题的其他人，我遇到了此问题并删除了我的 mime.types 包括
http {
include mime.types;
...
server {
listen: 80
...
}
回答by xsultan
Try adding this to your /etc/nginx/conf.d/default.conf
尝试将其添加到您的 /etc/nginx/conf.d/default.conf
location ~ \.css {
add_header Content-Type text/css;
}
location ~ \.js {
add_header Content-Type application/x-javascript;
}
回答by Young Emil
I changed the owner of the project to root using:
我使用以下方法将项目的所有者更改为 root：
chown root /usr/share/nginx/html/mywebprojectdir/*
chown root /usr/share/nginx/html/mywebprojectdir/*
and changed permissions using:
并使用以下方法更改权限：
chmod 755 /usr/share/nginx/html/mywebprojectdir/*
chmod 755 /usr/share/nginx/html/mywebprojectdir/*
You can look at my answer here
回答by englishPete
Angular 8 Application => NGINX
Angular 8 应用 => NGINX
Eventually after some digging, removing one option at a time, I managed to trace the option that was causing the MIME types errors I was getting in the console.
最终，经过一番挖掘，一次删除一个选项，我设法跟踪导致我在控制台中遇到的 MIME 类型错误的选项。
I Commented it out and viola content was displayed fine.
我将其注释掉，中提琴内容显示良好。
# This option causes issues with Angular 8 served applications
# add_header X-Content-Type-Options nosniff;
# Include MIME Types
include /etc/nginx/mime.types
Hope it helps someone
希望它可以帮助某人
回答by user3598155
Check your nginx.conf! do you have config like this:
检查你的 nginx.conf！你有这样的配置吗：
include /usr/local/nginx/conf/mime.types;
I fixed this problem by adding this sentence
我通过添加这句话解决了这个问题
回答by Di V
Tried 1.verifying the permissions 2.checking the try_files .
尝试 1.verifying the permissions 2.checking the try_files 。
At the end, my layout was returned to normal by adding "include /etc/nginx/mime.types" into "http" section of "nginx.conf" file
最后，通过将“include /etc/nginx/mime.types”添加到“nginx.conf”文件的“http”部分，我的布局恢复正常
"http{
include /etc/nginx/mime.types;
sendfile on;
server {
listen 443 ssl;
....."
Otherwise, the browser was complaining about css files interpreted as text instead of stylesheets.
否则，浏览器会抱怨 css 文件被解释为文本而不是样式表。
回答by Charney Kaye
Manually including mime.typesresolved this for me:
手动包括mime.types为我解决了这个问题：
server {
...
include /etc/nginx/mime.types;
...
}
回答by Andreas Panagiotidis
I was getting a similar error with Angular 5 - typescript and Nginx server.
我在 Angular 5 - typescript 和 Nginx 服务器上遇到了类似的错误。
error in console
控制台中的错误
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
The Javascript files where also downloaded with the content of the index.html. Plus, when I was in page "https://my-server.com/organizations" and refreshing the browser, I was sent to the "https://my-server.com/organizations/organizations" url.
Javascript 文件也与 index.html 的内容一起下载。另外，当我在页面“ https://my-server.com/organizations”并刷新浏览器时，我被发送到“ https://my-server.com/organizations/organizations” url。
The solution for me was just to change the base href from
对我来说，解决方案只是将 base href 从
<base href=""> <-- wrong
to
到
<base href="/"> <-- right
That was it, no changes in nginx.conf or anything else.
就是这样，nginx.conf 或其他任何内容都没有变化。
回答by Mohammad AbuShady
I left out the obvious parts from the config to reduce duplication, this is just the base and you'll need to add the other config from your config, like the listen and the caching part.
我省略了配置中明显的部分以减少重复，这只是基础，您需要从配置中添加其他配置，例如监听和缓存部分。
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;
}
}
回答by Muhammad Februriyanto
Well, after all failed attempts, i've managed to solve this problem by removing link type="text/css" from my code, and leave css as this:
好吧，在所有失败的尝试之后，我设法通过从我的代码中删除 link type="text/css" 来解决这个问题，并将 css 保留如下：
<link rel="stylesheet" href="/css/style.css" />
