Angular、Nginx、Docker 在页面刷新时导致 404 错误答案

【问题标题】：Angular, Nginx, Docker results in 404 error on page refreshAngular、Nginx、Docker 在页面刷新时导致 404 错误
【发布时间】：2020-07-21 03:07:42
【问题描述】：

我有一个角度应用程序，并在 docker 容器上使用 nginx。当我运行应用程序时，localhost 工作正常，它重定向到localhost/auth，但是当我用地址中的localhost/auth 刷新浏览器时，它会给出错误 404。我也关注过其他论坛，例如404 Error on page refresh with Angular 7, NGINX and Docker、Angular Nginx Docker 404，但仍然存在同样的问题。

DockerFile

FROM node:alpine as builder

WORKDIR /app
# Install app dependencies
COPY . /app/
RUN cd /app && yarn install
RUN cd /app && yarn build:aot:dev

COPY ./nginx.conf /etc/nginx/nginx.conf

# STEP 2 build a small nginx image with static website
FROM nginx:alpine
COPY ./nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app/dist/apps/martor /usr/share/nginx/html
RUN ls /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

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;
    server {
    listen       80;
    server_name localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    error_page 403 404 /index.html;
    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ index.html;
        index  index.html index.html;


        # Allo CORS
        if ($request_method ~* "(GET|POST|PUT|DELETE|PATCH|OPTIONS)") {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT, PATCH, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, x-access-token,access-control-allow-origin,access-control-allow-credentials,access-control-allow-headers';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    }
}

【问题讨论】：

你能解决这个问题吗？

标签： angular docker nginx

【解决方案1】：

通过将错误页面添加到 aws CDN 云前端来解决问题

【讨论】：

【解决方案2】：

我相信您忘记了 try_files 行中的 /index.html（注意“/”）。所以在访问localhost/auth时，nginx会尝试解析/usr/share/nginx/html/auth/index.html而不是/usr/share/nginx/html/index.html。

尝试替换

try_files $uri $uri/ index.html;

由

try_files $uri $uri/ /index.html;

【讨论】：

改成 /index.html 还是不行