angular - Nginx 因不允许的 MIME 类型 (“text/html” 而被阻止)。 Angular 8

Question

everythink 使用这些代码工作起来很棒。

 http {
        include       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  logs/access.log  main;

        sendfile        on;
        #tcp_nopush     on;

        #keepalive_timeout  0;
        keepalive_timeout  65;

        gzip  on;

        gzip_static on;
            gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
            gzip_proxied any;
            gzip_comp_level 5;
            gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
            gzip_vary on;


        server {
            listen       80;
            server_name  127.0.0.1;


            gzip_static on;
            gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
            gzip_proxied any;
            gzip_comp_level 5;
            gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
            gzip_vary on;

            #Working awesome
            location / {
            #This is For Angular 8 App And Working Good
              proxy_pass   http://127.0.0.1:4200;
                      proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;

                }
            }

但是当我将它添加到域额外应用程序时，它就变成了一个大问题。使用这些代码:

http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;

    gzip_static on;
        gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
        gzip_proxied any;
        gzip_comp_level 5;
        gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
        gzip_vary on;


    server {
        listen       80;
        server_name  127.0.0.1;
        index index.html;
        root /Users/FURKAN/Desktop/exampleforstatichtmlpage;

        gzip_static on;
        gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
        gzip_proxied any;
        gzip_comp_level 5;
        gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
        gzip_vary on;


        location / {
            index index.html;


        }
        location /api/ {
             #Api working
             proxy_pass   http://127.0.0.1:3456/;


        }
        location /api/kullanicis {
             #Api working
             proxy_pass   http://127.0.0.1:3456/kullanicis;


        }
        location /api/yazars {
             #Api working
             proxy_pass   http://127.0.0.1:3456/yazars;


        }
        location /api/kitaps {
             #Api working
             proxy_pass   http://127.0.0.1:3456/kitaps;


        }
        location /demo {
         #This is For Angular 8 App And Not Working ı am getting error
          proxy_pass   http://127.0.0.1:4200;
         proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        }    
        }

得到这些错误 enter image description here

我有一个域和静态文件。我想将 angular 8 应用程序添加到同一个域，例如 example.com/demo 将打开我的 angular 8 应用程序。我的 api 正在与 nginx 一起工作，除了 angular 应用程序。

Angular 索引.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Client</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Answer 1

当您构建应用程序时，您的应用程序应该知道它将“托管”在哪个路径下。在您的新版本中，此路径为“/demo/”。所以要让你的应用程序正常工作，只需像这样将参数添加到构建命令中

ng build --prod --baseHref=/demo/