I got a weird bug: after deploying my django project to server, particular directly in media is 403 forbidden for no reason, while others directories work fine and are properly loaded.
Everything works fine on local machine, but when it goes to the server, avatar directory is somehow forbidden, here's a tree diagram of my media folder.
.
├── [drwx------ 2.6K] avatar
│ ├── [-rw-r--r-- 6.4K] 1.png
│ ├── [-rw-r--r-- 16K] 48.png
│ ├── [-rw-r--r-- 16K] 69.png
│ └── [-rw-r--r-- 13K] 9.png
├── [drwxr-xr-x 192] cdn
│ ├── [drwxr-xr-x 384] css
│ │ ├── [-rw-r--r-- 27] console.css
│ │ ├── [-rw-r--r-- 8.2K] demo.css
│ │ ├── [-rw-r--r-- 58K] fontawesome-5.14.0.all.min.css
│ │ └── [-rw-r--r-- 215] shelf.css
│ ├── [drwxr-xr-x 224] js
│ │ ├── [-rw-r--r-- 59K] demo.js
│ │ ├── [-rw-r--r-- 5.3K] embed.js
│ └── [drwxr-xr-x 256] webfonts
│ ├── [-rw-r--r-- 131K] fa-brands-400.ttf
│ ├── [-rw-r--r-- 199K] fa-solid-900.ttf
├── [drwxr-xr-x 192] common
│ ├── [-rw-r--r-- 230K] bg.jpg
│ └── [-rw-r--r-- 152K] bg2.jpg
├── [drwxr-xr-x 96] demo
│ └── [-rw-r--r-- 3.5M] Screen_Shot_2021-08-16_at_3.45.01_pm.png
├── [drwxr-xr-x 224] look
│ ├── [-rw-r--r-- 111K] main.jpg
│ └── [-rw-r--r-- 232K] me.jpg
├── [drwxr-xr-x 160] portray
│ ├── [-rw-r--r-- 3.5M] Screen_Shot_2021-08-16_at_3.45.01_pm.png
│ ├── [-rw-r--r-- 3.5M] Screen_Shot_2021-08-16_at_3.45.01_pm_VsswTUf.png
│ └── [-rw-r--r-- 3.5M] Screen_Shot_2021-08-16_at_3.45.01_pm_XIA2JgY.png
├── [drwxr-xr-x 224] profile
│ ├── [-rw-r--r-- 14K] IMG_1684.JPG
│ ├── [-rw-r--r-- 1.1K] deleted.webp
├── [drwxr-xr-x 128] projects
│ └── [-rw-r--r-- 19K] default.jpg
├── [drwxr-xr-x 96] team
│ └── [-rw-r--r-- 11K] default.jpg
└── [drwxr-xr-x 288] thumbnail
├── [-rw-r--r-- 184K] seagull.png
└── [-rw-r--r-- 341K] typescript-in-react.png
all the resources I can load properly in my website except for avatar directory. that means I cannot load a single image. basically avatar contains 80 png images with numeric filename those are avatar frames for user to select their own.
I have tried
Django/Nginx - Error 403 Forbidden when serving media files over some size
but did not work.
I found that most of images in avatar that is smaller than 16kb, which are a lot smaller that for example another image portray.png which is 3.5mb that can be properly served!
also I thought about png format, but pngs in other folder turns out loading perfectly!
when I load my page, in console it shows:
[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (1.png, line 0)
[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (60.png, line 0)
[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (11.png, line 0)
[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (79.png, line 0)
[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (25.png, line 0)
[Error] Failed to load resource: the server responded with a status of 403 (Forbidden) (31.png, line 0)
...
I also tried to upload an image (filename not in number but alphabets) that can be properly loaded and dumps it into avatar folder. tries load it from server, and it failed. seems everything in avatar is forbidden.
After tons of research I still have no clue and wonder why this happens. If any has been in this situation before please give me a hand.
I will be more than glad of any suggestions on possible reasons.
