Enable CORS header for uploads directory

[kellenmace]

Hi

I have a WordPress multisite install that uses Trellis and Bedrock at https://api.harnessup.com (example subsite URLs: https://demo.api.harnessup.com, https://esfox.api.harnessup.com, etc.).
I also have a client-side JS apps for each of our clients that interact with the corresponding WP backend subsite via WPGraphQL (example URLs: https://demo.harnessup.com, https://esfox.harnessup.com, etc.)

From our frontend JS app, we need to be able to download image files from the WP /uploads directory and load them into a client-side image manipulation library that we use.

Currently though, attempts to do that result in a CORS error stating No 'Access-Control-Allow-Origin' header is present on the requested resource. This screenshot illustrates the issue: https://cloudup.com/cexLAQIZ6EZ

If someone could tell me now to add that CORS header so that assets within the /uploads directory can be downloaded, I would appreciate it. I haven’t been able to find documentation/examples. Do I need to add it in roles/wordpress-setup/templates/wordpress-site.conf.j2, somewhere, perhaps?

Please note that WPGraphQL already sets the header to 'Access-Control-Allow-Origin' => '*' in this file: https://github.com/wp-graphql/wp-graphql/blob/develop/src/Router.php#L274-L283. So I already have that set for all requests that involve WordPress executing – it’s just not set for requests for assets in the /uploads directory.

Thanks.

[JordanC26]

Hi Kellenmace,

I believe headers should be added via an nginx-includes directory.

• https://roots.io/docs/trellis/master/nginx-includes/#include-files

Create a directory inside trellis called nginx-includes, then a file for the policies (I don’t think the name matters) followed by conf.j2.

If you want this header to be applied to all sites being provisioned by Trellis. Create a sub directory called all, or one for each site specifically: example.com (matching the domain in wordpress_sites

/trellis/nginx-includes/all/cors.conf.js
/trellis/nginx-includes/example.com/cors.conf.j2

Here is an example of an item I have inside my nginx-includes, so you see the format.

# {{ ansible_managed }}

{% if env != 'development' -%}
# Prevent logging of assets and cache for maximum time
location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg)$ {
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public";
    add_header Vary "Accept-Encoding";
    access_log off;
    log_not_found off;
}
{%- endif %}

I am not too sure what exact line(s) needs adding in order for it to target the items from /uploads directory, however hopefully the above will be a start.

Ref:
https://enable-cors.org/server_nginx.html

[strarsis]

There is also the nginx_embed_security option!