Call all images from production site

Morning

I hope somebody can help with this.

I’ve busy moving off a fork of 10Up WP Local Docker and so far things are going great.

The one thing that I can’t figure out is how to call images and other assets off the production site so that I can don’t have to download them. I use Bedrock as my starting point.

I used to be able to do this with the following nginx custom config:

location ~* .(js|css|png|jpe?g|gif|ico)$ {
expires 24h;
log_not_found off;
try_files $uri $uri/ @production;
}
location @production {
resolver 8.8.8.8;
proxy_pass https://www.somedomain.com/$uri;
}

Is there a way to do this with devilbox?

Apologies if I’m not being clear, some of this is a little over my head as I’m still learning.

Brenton

I’ve tried everything I can think of but can’t get fallback for pulling images upstream working.

I’ve have the .devilbox directory in place and have copied the file from vhost-gen and named it nginx.yml and placed the above code (and some variations that I’ve found) in the file but images aren’t being pulled from production site.

Any help would be greatly appreciated. Aside from this requirement, I’m enjoying devilbox.

I hope that you have already sorted this. But when not read on.

When you request the web pages with DevTool’s Console opened, do you see CORS errors similar to “No Access-Control-Allow-Origin header found” ?

If so, I had to add the following location to the NginX server config to be able to access data files in JS from the browser. You probably only need to change the file extensions in the location line. Send as few headers and post types as needed. You probably need less. But at least the first one.

location ~* \.(?:json|yml|yaml|toml)$ {
  try_files $uri =404;
  add_header "Access-Control-Allow-Origin" "$http_origin" always;
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' always;
  add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' always;
  add_header 'Access-Control-Max-Age' 0 always;
}

Some additional reading here :



About adding ‘always’ to the headers :

1 Like

Sorry about the bombastic links at the end. I don’t know how that happened, and how to get rid of them.

Thanks for your reply BobbyBabes. I must admit that a most of what you said, and the links, are a little over my head.

I did find that after creating a copy of nginx.yml-example-vhost in the project’s .devilbox directory and and changing the name to nginx.yml and placing the code in the Basic vHost skeleton block it solved my problem.

While this may be a bit of a hack for now, it at least allows be to carry on evaluating devilbox for internal dev team use.

Glad you got it going. It’s not a hack. It’s the only and proper way around CORS errors. All browsers refuse to download specific content like data (json, toml, yaml, etc) and images to protect against theft, if the download happens from a domain other than where the HTMl file was downloaded from. The server has to explicitly allow download of these files from other domains by sending relevant CORS headers for a single file, multiple files, or a folder, etc.

If you encounter issues with CSS files and CORS in Google Chrome (so far the only browser enforcing CORS on linked CSS files) look here :
https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property/49994161#49994161