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

【问题标题】：Restrict access to images from browser directly限制直接从浏览器访问图像
【发布时间】：2020-10-21 20:54:30
【问题描述】：

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

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

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

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

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

/var/www/mywebsite/preprocessedimages

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

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

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;
    }

}

【问题讨论】：

标签： angular nginx nginx-location

【解决方案1】：

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

【讨论】：