angular - Angular 在 NGINX 反向代理 404 后面的 Docker 中运行

问题描述

我一直在像疯子一样调试这个，希望有人可以为我解释一下。

TLDR：如果我在反向代理中省略 try_files，则应用程序可以完美运行，尽管每当重新加载页面或直接浏览链接时都会返回 404。如果我在反向代理中包含 try_files，我会在下面收到一堆 MIME 类型错误。

Refused to apply style from 'https://app.fwslift.com/styles.f078b28aa628841d3165.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Refused to execute script from 'https://app.fwslift.com/runtime.4d85aaa8b193e87dd636.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

我有一个 Angular 应用程序在 nginx:alpine 容器中运行，并在构建时复制了以下配置（可能不是让 COR 工作的最简单实现，但唉）：

server {
  listen 80;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

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

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }

    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
    }
    
    if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
    }

    if ($request_method = 'PUT') {
        add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
    }

    if ($request_method = 'DELETE') {
        add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
    }

    if ($request_method = 'PATCH') {
        add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
    }
  }
}

我的 ubuntu 主机本机运行 nginx，并使用以下配置作为反向代理：

server {
    listen 80;
    server_name app.fwslift.com;

    include snippets/letsencrypt.conf;
    return 301 https://$host$request_uri;
}

server {

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name app.fwslift.com;

    ssl_certificate /etc/letsencrypt/live/app.fwslift.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/app.fwslift.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/app.fwslift.com/chain.pem;

    include snippets/ssl.conf;
    include snippets/letsencrypt.conf;

    location / {    
#       try_files $uri $uri/ /index.html;

        proxy_pass http://localhost:5001/;
        proxy_http_version  1.1;
            proxy_cache_bypass  $http_upgrade;

            proxy_set_header Upgrade           $http_upgrade;
            proxy_set_header Connection        "upgrade";
            proxy_set_header Host              $host;
            proxy_set_header X-Real-IP         $remote_addr;
            proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Host  $host;
            proxy_set_header X-Forwarded-Port  $server_port;
    }
}

我尝试将 MIME 直接链接到这些配置中的每一个以及一些其他“把东西扔到墙上”的东西。

谁能给我这方面的指导？谢谢！

标签： angulardockernginxnginx-reverse-proxy

angular - Angular 在 NGINX 反向代理 404 后面的 Docker 中运行

问题描述

解决方案

推荐阅读