Image styles are not created 404 Not Found

Question

I'm running on Nginx. All permissions are set to 777 and owner is www-data:www-data.

1. Create/edit a node with image_field, upload an image.
2. Original image is uploaded and stored at sites/default/files/image.jpg
3. Preview works, etc. Save node, no image shown (style Large or any custom).
4. Error 404 Not Found e.g. URL https://test.example.com/sites/default/files/styles/product/public/image-hd-wallpapers-3_0.jpg?itok=1E64uuXF
5. The styles subfolders are created like e.g. product/public even the sample.png file is created inside sites/default/files/styles/product/public/modules/image/
6. But no image style is created when uploading image to a node and saving.

I followed and tried everyting done in this image style (imagecache) images are not being created and this Aplying image styles to images return 404 for images

I have this in my nginx conf:

location ~ ^/sites/.*/files/styles/ { # For Drupal >= 7
    try_files $uri @rewrite;
}

Permissions: htdocs/sites/default/files # ls -al

drwxr-xr-x 10 www-data www-data   4096 Feb 13 13:01 .
drwxr-xr-x  3 root     root       4096 Nov 17 12:58 ..
drwxr-xr-x  3 www-data www-data   4096 Nov 25 18:57 bootstrap
drwxr-xr-x  2 www-data www-data   4096 Feb  8 13:01 ctools
drwxr-xr-x  2 www-data www-data   4096 Nov 19 23:17 fonts
-r--r--r--  1 www-data www-data    476 Nov 17 13:00 .htaccess
-rw-rw-r--  1 www-data www-data 243154 Feb 13 12:40 image-hd-wallpapers-3_0.jpg
-rw-rw-r--  1 www-data www-data 243154 Feb 13 12:49 image-hd-wallpapers-3_1.jpg
-rw-rw-r--  1 www-data www-data 243154 Feb 13 13:01 image-hd-wallpapers-3_2.jpg
-rw-rw-r--  1 www-data www-data 243154 Feb 13 12:37 image-hd-wallpapers-3.jpg
drwxrwxr-x  2 www-data www-data   4096 Feb  8 21:22 js_injector
drwxrwxr-x  2 www-data www-data   4096 Jan 25 00:35 mailsystem
drwxrwxr-x  2 www-data www-data   4096 Nov 17 13:02 pictures
drwxrwxr-x  4 www-data www-data   4096 Feb 13 12:41 styles
drwxrwxr-x  3 www-data www-data   4096 Dec 29 13:00 videos

/styles/ incl. subfolders.

drwxrwxr-x  4 www-data www-data 4096 Feb 13 12:41 .
drwxr-xr-x 10 www-data www-data 4096 Feb 13 13:01 ..
drwxr-xr-x  3 www-data www-data 4096 Feb 13 12:41 large
drwxr-xr-x  3 www-data www-data 4096 Feb 13 12:41 product

I tracked down the issue causing it, but still need to figure out why it is causing it, because we need that setting to keep our images and other files optimized with correct headers, etc.

The issue is this snipped in the domain's nginx config:

location ~* \.(?:css|js|ico|gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|eot)$ {
    expires 1w;
    #add_header Pragma public;
    #add_header Cache-Control "public";
    add_header ETag "";
    add_header Cache-Control "max-age=2628000, no-transform, public";
}

Removing it, solves the problem, but we need to keep it.

Answer 1

The solution is to add try_files $uri $uri/ @rewrite; at the bottom right after add_header, final snippet with more edits:

location ~* /sites/default/files/.*\.(?:css|js|ico|gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|eot)$ {
    expires 1w;
    add_header ETag "";
    add_header Cache-Control "max-age=2628000, no-transform, public";
    try_files $uri $uri/ @rewrite;
}

This solves the issue, we use this snipped with AdvAgg module.