时间戳

首页 > 解决方案 > 限制直接从浏览器访问图像

angular - 限制直接从浏览器访问图像

问题描述

我有一个用 Angular 8 开发的网站和一个用 .Net Core 开发的 Web API。我已经用 Nginx 在 Linux VM 上托管了这个网站。

我在 linux 服务器上的文件夹结构如下。

/var/www/mywebsite/angularapp这是我的角度应用程序

/var/www/mywebsite/dotnetcorewebapi这是我的网络 API

我在下面的位置保存了一些 jpeg 图像。

/var/www/mywebsite/preprocessedimages

问题是：我希望这些图像只能通过我的网站访问，而不是直接从浏览器访问。

这意味着我想限制用户通过在浏览器中输入以下内容来访问图像，但是相同的图像应该能够在我的 Web 应用程序中呈现

https://mywebsite/getprocessedimage/image.jpeg

我有什么选择来实现这个功能。我相信这更多的是对 nginx 默认文件的设置。非常感谢您的快速帮助。下面是 nginx 默认文件。

server {
    listen 80 default_server;
    listen [::]:80 default_server;


    root /var/www/mywebsite/angularapp;

    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri /index.html; 
    }
    
    #if the request is for API
    location ~* /coreapi{
        proxy_pass         http://localhost:port;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }

    #if the request is for image
    location ^~ /getprocessedimage/ {
        #autoindex on;
        alias /var/www/mywebsite/preprocessedimages;
    }

}

标签： angularnginxnginx-location

解决方案

上传到服务器的所有图像都应该并且将通过它的路径可用。我认为您不能限制访问，除非您使用某种类型的身份验证（例如用户名/密码）来通过 API（例如 google drive 的 API）查看，从那里图像可能会出现在后端，然后重定向到前端。没有人可以像这样访问该文件夹。这里是 Google Drive API 的文档

推荐阅读