Nginx proxy image/javascript hosted externally

Question

I'm trying to proxy a javascript and image hosted by a external party with nginx

I'm running my site on https and they only offer the files through http, I have already had contact with them about this but the can't give timeline when they are gone resolve this.

So no I'm trying to proxy_pass those files in my nginx config I have the following location blocks

location /blogcounter/image {
        #rewrite ^/blogcounter(.*) /$1 break;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_pass http://widget.external-domain.tld/$uri$is_args?$args;
}
location /blogcounter.js {
        #rewrite ^/blogcounter(.*) /$1 break;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_pass http://widget.external-domain.tld/$uri$is_args?$args;
}

The widget I want on my page is.

<a title="external-domain.tld" href="http://external-domain.tld/" id="hr-random_id" target="_parent">
    <img src="https://my-domain.tld/blogcounter/image?image=red_s&blog_id=random_id" alt="alt-text" border="0">
</a>
<script type="text/javascript"> 
    var hr_currentTime = new Date(); 
    var hr_timestamp = Date.parse(hr_currentTime.getMonth() + 1 + "/" + hr_currentTime.getDate() + "/" + hr_currentTime.getFullYear()) / 1000;
    document.write('<script type="text/javascript" src="https://my-domain.tld/blogcounter.js?blog_id=random_id&timestamp=' + hr_timestamp +'"></script>'); 
</script>

So I want the client request going through my server which has https which makes my server request the file from the external server and servers it back to the client. Currently this is not working yet, is see the request in the access log which also shows a status code 200 but neither the image or javascript file are send back. Can anyone help with what I'm doing wrong?

Answer 1

Mapping a client URL like:

https://my-domain.tld/blogcounter/image?image=red_s&blog_id=random_id

to an upstream URL like:

http://widget.external-domain.tld/blogcounter/image?image=red_s&blog_id=random_‌​id

requires no magic URI transformations, so the simplest proxy_pass form is all that is required:

location /blogcounter {
    proxy_pass http://widget.external-domain.tld;
    proxy_set_header ...;
    ...
}

Notice that there are no trailing / as the request URI is passed upstream unmodified.

I have set the location to /blogcounter as I do not know what other locations (if any) your server hosts.

You do not mention the upstream URL for blogcounter.js. The above location block will also map:

https://my-domain.tld/blogcounter.js

to the upstream URL:

http://widget.external-domain.tld/blogcounter.js

See this document for details.