how to automatically set header to all files inside /storage/ folder? - php

Question

My frontend is trying to fetch() an image from my API, which usually handles my CORS. Because it directly requests the image, circumventing the API, I receive this issue: (which makes complete sense why)
Access to XMLHttpRequest at 'https://my-api.test/storage/media/1/15/poster.jpg' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I need to adjust my Nginx settings so that any file requested living under the /storage/ path will have this header added.
I must be misunderstanding parts of how I should configure Nginx in this case, because I was believing that this location-block should have worked:
location /storage/ {
add_header 'Access-Control-Allow-Origin' '*';
}
Oddly, it returns a "404 status":
curl -I https://my-api.test/storage/test-media/butterfly.jpg
HTTP/2 404
server: nginx/1.19.4
date: Tue, 17 Nov 2020 06:57:23 GMT
content-type: image/jpeg
content-length: 116501
etag: "5f6045f4-1c715"
On the other hand, if I disable the location-block condition:
#location /storage/ {
add_header 'Access-Control-Allow-Origin' '*';
#}
The header then is properly added:
curl -I https://my-api.test/storage/test-media/butterfly.jpg
HTTP/2 200
server: nginx/1.19.4
date: Tue, 17 Nov 2020 07:00:53 GMT
content-type: image/jpeg
content-length: 116501
last-modified: Tue, 15 Sep 2020 04:41:24 GMT
etag: "5f6045f4-1c715"
access-control-allow-origin: *
accept-ranges: bytes
Any help would be truly appreciated!
edit 1
I am not sure whether it makes a difference, but the "storage" folder is a symlink.
edit 2
The nginx error:
2020/11/17 12:45:50 [error] 64990#0: *1 open() "/storage/media/1/1/turtle.jpg" failed (2: No such file or directory), client: 127.0.0.1, server: , request: "HEAD /storage/media/1/1/turtle.jpg HTTP/1.1", host: "my-api.test"
When I try to visit the URL in the browser my-api.test/storage/media/1/1/turtle.jpg it returns the image and not a 404.

Answer 1

The solution to this problem was rather simple:
location /storage/ {
root '/Users/chrisbreuer/code/my-api/public';
add_header 'Access-Control-Allow-Origin' "*" always;
}
As you can see, the location-block is now adding a root which is where the "storage" folder lives in.
In my case, I was using Laravel Valet and when you have a secure site, you would need to adjust the nginx config file which is located in this path: ~/.config/valet/Nginx/meema-api.test.
Now, simply run valet restart and all files requested from within the storage-folder will have the header included.