angularnginxseorendertron

How do I url-encode the value of request_uri in nginx?


I have installed rendertron to help with SEO / server side rendering of my Angular website. Everything works fine until I use query parameters.

As you can see from the linked section of the FAQs above it requires for the full URI to be encoded, including the ?, & and = characters in the query e.g. https://mywebsite.com/render/http://mywebsite.com/%3Fpage%3Dhome

I'm using nginx to detect the robots I wish to redirect to the prerendered page but parameters are being passed through as normal. Is there a way to get nginx to replace the characters listed above with url encoded ones? Here is my redirect portion of the nginx config:

location /rendertron/ {
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_pass http://127.0.0.1/render/$scheme://$host:$server_port$request_uri;
}

Solution

  • So I ended up adding the nginx js-module and creating this function:

    import qs from 'querystring';
    
    function encodeParams(r) {
        return encodeURIComponent(qs.stringify(r.args));
    }
    
    export default { urlEncode }
    

    I modified the nginx site configuration like this:

    js_import conf.d/url_encode.js;
    
    js_set $encoded_params url_encode.encodeParams;
    
    server {
    
        # other config ...
    
            location /rendertron/ {
    
             proxy_set_header X-Real-IP  $remote_addr;
             proxy_set_header X-Forwarded-For $remote_addr;
    
             proxy_pass http://127.0.0.1/render/$scheme://$host:$server_port$1%3F$encoded_params;
            }
    
    

    I had to manually add %3F before adding the encoded_params. This seems to work fine for URIs with or without query parameters and solves my problem.