mime.types文件在使用nginx:alpine容器化的Angular 8应用程序中不适用于JavaScript和CSS文件。

Question

mime.types文件在使用nginx:alpine容器化的Angular 8应用程序中不适用于JavaScript和CSS文件。

5

我有一个多阶段的Docker镜像，用于我的Angular应用程序，它使用nginx:alpine基础镜像。我有以下Nginx配置和VHOST设置文件（在Docker容器内部）。

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

我的项目文件在以下位置：

/usr/share/nginx/html

以下是我的配置： 1. default.conf

server {
    listen 0.0.0.0:80;
    listen [::]:80;
    default_type application/octet-stream;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    client_max_body_size    256M;

    root /usr/share/nginx/html;


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

2. nginx.conf

user  nginx;
worker_processes  auto;

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;
}

如您所见，mime.types文件已经被包含了，在给定的路径中也有此文件。

当我运行这个应用程序时，浏览器会显示以下错误信息（针对加载的css和javascript文件）：

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

我在论坛上尝试了许多组合，但都没有成功。如果您有解决方案的提示，请告诉我。

- Sunil Kpmbl

3

你确定该文件存在吗？如果该文件不存在，则会被替换为index.html，在错误信息中解释MIME类型。 - Richard Smith

mime.types文件已经存在。我通过docker容器的交互式shell进行了验证。如果我提供一个不存在的文件，容器将无法启动并显示错误。 - Sunil Kpmbl

2

我指的是导致错误的JS文件。由于您的配置始终为不存在的文件返回“index.html”，因此您不会看到404文件未找到的错误。 - Richard Smith

那是一个很好的提示！我已经验证了 /usr/share/nginx/ 文件夹，文件都在那里。但不知何故我的上下文路径在请求中丢失了，这导致了404和重定向，正如你所提到的。我想我可以解决这个问题。谢谢Richard！请将其写成答案，我会投票支持它。 - Sunil Kpmbl

请查看此问题评论。 - user11593453

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user11593453 · Accepted Answer

Github上有几个相关的问题，请查看这个以获取完整的情况概述。

基本上，Angular 8构建器将“module”标签添加到dist/index.html（或者你的编译器输出文件夹）中的脚本元素中。这不受Nginx MIME默认配置的支持。以下是你应该添加到nginx.config的内容。

http {
    types {
      module js;
    }
    include       /etc/nginx/mime.types;
    # rest of your config...
}

现在，mime.types 已经扩展了这种类型，这是 Angular 8 的一个“特性”（或者说是 bug，这取决于你的观点...）。

希望它能在你的情况下（或未来读者的情况下）正常工作，我使用相同的堆栈，它对我来说很好用。