Allow Access Control Origin on a trellis server

trellis
1

Hi,

I’m using Google VR to show an image on a page. The issue is that the script itself creates an iFrame with a source like this:

https://storage.googleapis.com/vrview/2.0/index.html?image=https://s3-us-west-2.amazonaws.com/s.cdpn.io/5961/HY360_0103.jpg&is_stereo=false&

That then loads the image (?image=http...) from wherever it is hosted into the Google iFrame.

I’m making a Wordpress plugin so that URL uses an image from the users media library in Wordpress, but then the iFrame’s image attribute loads from the server. The issue it that it creates an access control allow origin error:

XMLHttpRequest cannot load http://example.com/app/uploads/2017/06/HY360_0103.jpg. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://storage.googleapis.com’ is therefore not allowed access.

So I need to add an Access Control Allow Origin on the site. I was hoping I could do this with Wordpress:

function add_allowed_origins($origins) {
    $origins[] = 'https://storage.googleapis.com';
    return $origins;
}
add_filter('allowed_http_origins', 'add_allowed_origins');

But that doesn’t seem to work. Can anyone help me add Access Control Allow Origin to (preferably just the uploads of) the website in Trellis?

It is an nginx site so unfortunately I can’t just add a line in the .htaccess.

Thanks in advance!
Dave

##Update

I’m ploughing on trying to get this working.

I think need to get something like this added to my nginx.conf. I would imagine it would look like this:

# Cross domain image access
location ~* \.(?:jpg|png)$ {
  include h5bp/directive-only/cross-domain-insecure.conf;
  access_log off;
  add_header Cache-Control "max-age=2592000";
}

So, that’s cool. I think I have found the file which is this:

/etc/nginx/sites-enabled/website.com.conf

But at the very top it says:

# Ansible managed

So I probably shouldn’t edit it directly.

So I need to be able to update this nginx config file from Ansible. I found a file inside of the trellis directory called roles/nginx/templates/nginx.conf.j2 but this doesn’t look like anything I’ve seen yet.

Can anyone help me put what I need into this folder so I can upload it?

2

Correct :slight_smile:

Read this: Nginx Includes | Trellis Docs | Roots, it should provide the answers you’re looking for. If you need more help, let us know.

3

Thanks a lot. It was a bit tricky, but I followed through the docs and got there. I created a new folder structure as per the instructions

nginx-includes/example.com/access-control.conf.j2

and basically plonked what I already had in there. Then I executed the server.yml script and it was pretty much good to go : )

Thanks for the tip on where to look.
Dave

2 Likes