部署到AWS ECS的ngnix docker容器中的MIME类型("text/html")不匹配



一目了然执行的步骤:

  • Angular 10构建步骤
  • Nginx docker容器构建和推送步骤
  • AWS ECS服务重启刷新公共容器

在端点上收到错误:

GEThttp://<aws load balancer endpoint (masked)>/runtime.js
[HTTP/1.1 404 Not Found 71ms]
GEThttp://<aws load balancer endpoint (masked)>/polyfills.js
[HTTP/1.1 404 Not Found 55ms]
GEThttp://<aws load balancer endpoint (masked)>/styles.js
[HTTP/1.1 404 Not Found 67ms]
GEThttp://<aws load balancer endpoint (masked)>/vendor.js
[HTTP/1.1 404 Not Found 66ms]
GEThttp://<aws load balancer endpoint (masked)>/main.js
[HTTP/1.1 404 Not Found 105ms]
The resource from “http://<aws load balancer endpoint (masked)>/polyfills.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
<aws load balancer endpoint (masked)>
Loading failed for the <script> with source “http://<aws load balancer endpoint (masked)>/polyfills.js”. <aws load balancer endpoint (masked)>:12:1
The resource from “http://<aws load balancer endpoint (masked)>/runtime.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
<aws load balancer endpoint (masked)>
Loading failed for the <script> with source “http://<aws load balancer endpoint (masked)>/runtime.js”. <aws load balancer endpoint (masked)>:12:1
The resource from “http://<aws load balancer endpoint (masked)>/styles.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
<aws load balancer endpoint (masked)>
Loading failed for the <script> with source “http://<aws load balancer endpoint (masked)>/styles.js”. <aws load balancer endpoint (masked)>:12:1
The resource from “http://<aws load balancer endpoint (masked)>/vendor.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
<aws load balancer endpoint (masked)>
Loading failed for the <script> with source “http://<aws load balancer endpoint (masked)>/vendor.js”. <aws load balancer endpoint (masked)>:12:1
The resource from “http://<aws load balancer endpoint (masked)>/main.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
<aws load balancer endpoint (masked)>
Loading failed for the <script> with source “http://<aws load balancer endpoint (masked)>/main.js”. <aws load balancer endpoint (masked)>:12:1
GEThttp://<aws load balancer endpoint (masked)>/favicon.ico

dockerfile:

FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY mime.types /etc/nginx/mime.types
COPY security-headers.conf /etc/nginx/security-headers.conf
COPY /dist/payload-ng /usr/dist/nginx/html

nginx.conf:

user nginx;
worker_processes    1;
worker_rlimit_nofile    8192;
events {
worker_connections    1024;
}
http {
include /etc/nginx/mime.types;  
default_type  application/octet-stream;
server_names_hash_bucket_size   128;
sendfile    on; 

server {
listen  80;
server_name localhost;
root    /usr/dist/nginx/html;
index   index.html;

location / {
try_files $uri$args $uri$args/ /index.html;
add_header Cache-Control 'max-age=86400'; # one day
include /etc/nginx/security-headers.conf; 
}
location ~ .*.css$|.*.js$ {               
add_header Cache-Control 'max-age=31449600'; # one year        
include /etc/nginx/security-headers.conf;        
}
location ~ /index.html|.*.json$ {
expires -1;
add_header Cache-Control 'no-store, no-cache, must-revalidate,
proxy-revalidate, max-age=0';
}
}
}

mime.types:

类型{

# Data interchange
application/atom+xml                  atom;
application/json                      json map topojson;
application/ld+json                   jsonld;
application/rss+xml                   rss;
application/vnd.geo+json              geojson;
application/xml                       rdf xml;

# JavaScript
# Normalize to standard type.
# https://tools.ietf.org/html/rfc4329#section-7.2
application/javascript                js;

# Manifest files
application/manifest+json             webmanifest;
application/x-web-app-manifest+json   webapp;
text/cache-manifest                   appcache;

# Media files
audio/midi                            mid midi kar;
audio/mp4                             aac f4a f4b m4a;
audio/mpeg                            mp3;
audio/ogg                             oga ogg opus;
audio/x-realaudio                     ra;
audio/x-wav                           wav;
image/bmp                             bmp;
image/gif                             gif;
image/jpeg                            jpeg jpg;
image/png                             png;
image/svg+xml                         svg svgz;
image/tiff                            tif tiff;
image/vnd.wap.wbmp                    wbmp;
image/webp                            webp;
image/x-jng                           jng;
video/3gpp                            3gpp 3gp;
video/mp4                             f4v f4p m4v mp4;
video/mpeg                            mpeg mpg;
video/ogg                             ogv;
video/quicktime                       mov;
video/webm                            webm;
video/x-flv                           flv;
video/x-mng                           mng;
video/x-ms-asf                        asx asf;
video/x-ms-wmv                        wmv;
video/x-msvideo                       avi;
# Serving `.ico` image files with a different media type
# prevents Internet Explorer from displaying then as images:
# https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee
image/x-icon                          cur ico;

# Microsoft Office
application/msword                                                         doc;
application/vnd.ms-excel                                                   xls;
application/vnd.ms-powerpoint                                              ppt;
application/vnd.openxmlformats-officedocument.wordprocessingml.document    docx;
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet          xlsx;
application/vnd.openxmlformats-officedocument.presentationml.presentation  pptx;

# Web fonts
application/font-woff                 woff;
application/font-woff2                woff2;
application/vnd.ms-fontobject         eot;
# Browsers usually ignore the font media types and simply sniff
# the bytes to figure out the font type.
# https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern
#
# However, Blink and WebKit based browsers will show a warning
# in the console if the following font types are served with any
# other media types.
application/x-font-ttf                ttc ttf;
font/opentype                         otf;

# Other
application/java-archive              jar war ear;
application/mac-binhex40              hqx;
application/octet-stream              bin deb dll dmg exe img iso msi msm msp safariextz;
application/pdf                       pdf;
application/postscript                ps eps ai;
application/rtf                       rtf;
application/vnd.google-earth.kml+xml  kml;
application/vnd.google-earth.kmz      kmz;
application/vnd.wap.wmlc              wmlc;
application/x-7z-compressed           7z;
application/x-bb-appworld             bbaw;
application/x-bittorrent              torrent;
application/x-chrome-extension        crx;
application/x-cocoa                   cco;
application/x-java-archive-diff       jardiff;
application/x-java-jnlp-file          jnlp;
application/x-makeself                run;
application/x-opera-extension         oex;
application/x-perl                    pl pm;
application/x-pilot                   prc pdb;
application/x-rar-compressed          rar;
application/x-redhat-package-manager  rpm;
application/x-sea                     sea;
application/x-shockwave-flash         swf;
application/x-stuffit                 sit;
application/x-tcl                     tcl tk;
application/x-x509-ca-cert            der pem crt;
application/x-xpinstall               xpi;
application/xhtml+xml                 xhtml;
application/xslt+xml                  xsl;
application/zip                       zip;
text/css                              css;
text/html                             html htm shtml;
text/mathml                           mml;
text/plain                            txt;
text/vcard                            vcard vcf;
text/vnd.rim.location.xloc            xloc;
text/vnd.sun.j2me.app-descriptor      jad;
text/vnd.wap.wml                      wml;
text/vtt                              vtt;
text/x-component                      htc;
}

security-headers.conf:

add_header X-Content-Type-Options "nosniff" always;
add_header Feature-Policy "microphone 'none'; geolocation 'none'; camera 'none'" always;

在这一点上,我不确定是什么原因导致了mime类型的错误,并仔细检查了lates映像是否在ECS中运行。Nginx是我熟悉的一个新堆栈,在这件事上缺乏监督,我很感激你的帮助;text/javascript";头,但我很容易出错。我感谢您的意见。

您看到的错误是,实际的文件格式与您在HTML或JS文件中引用的文件格式不同。请参阅下面的链接,查找文件的正确MIME类型。

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Configuring_server_MIME_types

然后您应该选择正确的MIME类型。例如如果您正在引用CSS文件,则MIME类型应为"text/CSS",如果您正在参考Javascript文件,则应为"text/Javascript"。类似地,对于HTML,"text/HTML"等等。

如果对文件使用正确的MIME类型,则可以解决此问题。

最新更新