# Enable CORS header for uploads directory

**URL:** https://discourse.roots.io/t/enable-cors-header-for-uploads-directory/18364
**Category:** trellis
**Created:** 2020-05-29T14:26:41Z
**Posts:** 4

## Post 1 by @kellenmace — 2020-05-29T14:26:41Z

Hi :wave:t3:

I have a WordPress multisite install that uses Trellis and Bedrock at [https://api.harnessup.com](https://api.harnessup.com) (example subsite URLs: [https://demo.api.harnessup.com](https://demo.api.harnessup.com), [https://esfox.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](https://github.com/wp-graphql/wp-graphql) (example URLs: [https://demo.harnessup.com](https://demo.harnessup.com), [https://esfox.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](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](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.

---

## Post 2 by @JordanC26 — 2020-05-30T08:58:31Z

Hi Kellenmace,

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

- [https://roots.io/docs/trellis/master/nginx-includes/#include-files](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](https://enable-cors.org/server_nginx.html)

---

## Post 3 by @strarsis — 2020-05-30T17:34:28Z

There is also the [`nginx_embed_security`](https://github.com/roots/trellis/blob/master/roles/wordpress-setup/templates/wordpress-site.conf.j2#L208) option!

---

## Post 4 by @system — 2020-07-10T14:26:43Z

This topic was automatically closed after 42 days. New replies are no longer allowed.