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?

What is the upstream URL? Is it `http://example.com/blogcounter/image` and `http://example.com/blogcounter.js`? — Richard Smith, Dec 23 '15 at 10:00
@RichardSmith the upstream url to the externally hosted files is `http://widget.external-domain.tld/` so the normal url would be `http://widget.external-domain.tld/blogcounter/image?image=red_s&blog_id=random_id` now I want to make that file available through `https://my-domain.tld/blogcounter/image?image=red_s&blog_id=random_id` if that makes sense. I know the 2 location blocks could be rewritten so its one block but i was trying to get it to work first — Aegis, Dec 23 '15 at 11:05

score 2 · Accepted Answer · answered Dec 23 '15 at 11:14

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.

thx now it works I also had to removing the proxy_set_headers then it worked — Aegis, Dec 23 '15 at 13:12

Nginx proxy image/javascript hosted externally

1 Answers1