8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

Angular 应用程序从 8 迁移到 16。现在,部署后,nginx 服务器针对资产文件夹中的图像返回 403 禁止错误

Joelmob 1月前

20 0

使用 angular 8 一切正常。使用 angular 16 部署后,assets 文件夹中的所有图像都会出现 403 错误。但在本地运行良好。我们使用的是 docker build 和 nginx

使用角度 8

  • 一切正常。

角度 16

  • 部署后,assets 文件夹内的所有图像都出现 403 错误。
  • 但在本地运行良好。

我们使用 docker build 和 nginx 服务器进行部署。

用于访问图像的代码

<img src="assets/images/telematics/Ms_logo_white.png" alt="">

Docker 文件**

# base image
FROM node:16.14.0 as builder-side

# copy the package.json to install dependencies
COPY package.json package-lock.json ./

# Install the dependencies and make the folder
RUN npm install && mkdir /app && mv ./node_modules ./app

WORKDIR /app

COPY . .

# start app
RUN npm run build

FROM nginx:alpine

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

## Remove default nginx index page
RUN rm -rf /usr/share/nginx/html/*

COPY --from=builder-side /app/dist/ /usr/share/nginx/html

EXPOSE 4200

# Starting server.
CMD ["nginx", "-g", "daemon off;"]
#CMD ["npm", "start"] #gives 502 bad gateway

使用的 nginx 配置

worker_processes 1;

events { worker_connections 1024; }

http { 

    server {
        listen 4200;

        # server_name  localhost;
        root   /usr/share/nginx/html;
        include /etc/nginx/mime.types;
        server_tokens off;

        location / {
           
            index index.html index.htm;
            try_files $uri $uri/ /portal/index.html;
        }
        add_header X-Frame-Options "DENY";
        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
        add_header X-Content-Type-Options nosniff;
        add_header Referrer-Policy same-origin;
        add_header Permissions-Policy geolocation=*;
        add_header X-Permitted-Cross-Domain-Policies master-only;

        gzip on;
        gzip_vary on;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml application/javascript;
    }

}
  • 尝试提供图像的相对路径,但没有效果。
帖子版权声明 1、本帖标题:Angular 应用程序从 8 迁移到 16。现在,部署后,nginx 服务器针对资产文件夹中的图像返回 403 禁止错误
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Joelmob在本站《angular》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 问题似乎可能与权限或 nginx 提供文件的方式有关。您可以采取以下几个步骤来排除故障并可能修复 403 Forbidden 错误:

    1. 检查文件权限: 确保 dist 目录中的文件具有正确的权限。在 Dockerfile 中,将文件复制到 /usr/share/nginx/html ,检查 nginx 用户是否可以读取它们。您可以在 Dockerfile 中添加 RUN 命令来设置适当的权限:
        RUN chmod -R 755 /usr/share/nginx/html
    
    1. 验证 Nginx 配置: 确保 nginx 已正确配置以提供静态文件。您当前的 nginx.conf 看起来基本正确,但您可能需要调整以下几点:

    Remove try_files directive: 配置中的 try_files 指令

    location / {
        try_files $uri $uri/ =404;
    }
    

    检查资产位置: 确保 构建后, assets 文件夹正确放置在 dist

    1. 检查 Docker 构建和部署: 验证 dist 文件夹是否包含预期的结构和文件。您可以通过在 Docker 容器内运行 shell 并检查 /usr/share/nginx/html 目录来执行此操作:
        docker run -it --rm your_image_name sh
        cd /usr/share/nginx/html
        ls -l
    

    检查 资产 文件夹及其内容是否存在并具有正确的权限。

    1. 检查 Docker 日志: 查看 nginx 容器中的日志,查看是否存在任何错误或警告,这些错误或警告可能会提供有关 403 错误的更多背景信息:
        docker logs your_container_id
    
    1. p4

    2. p5

        location /assets/ {
            alias /usr/share/nginx/html/assets/;
        }
    
    1. 检查 Nginx 默认行为: 确保 nginx 中没有默认配置或其他设置可能会覆盖您的 nginx.conf 并导致权限问题。
返回
作者最近主题: