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

时间:2020-10-21 08:15:21

标签: angular nginx nginx-location

我有一个用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;
    }

}

1 个答案:

答案 0 :(得分:0)

在服务器上上传的所有图像均应并且将通过其路径可用。我认为除非您使用某种类型的身份验证(例如用户名/密码)通过API(例如Google Drive的API)进行查看,否则您不能限制访问权限,否则图像可能会从后端出现,然后重定向到前端。有人无法访问这样的文件夹。Here documentation for Google Drive's API