How to handle relative URLs correctly with a nginx reverse proxy

Better Stack Team
Updated on November 23, 2023

When using a reverse proxy with Nginx, handling relative URLs correctly is crucial to ensure that the proxied content is displayed properly. Here are some guidelines on how to handle relative URLs effectively:

Configuration Settings in Nginx:

  1. Set proxy_redirect: This directive helps to rewrite HTTP redirects and links in proxied content.

     
    location / {
        proxy_pass http://your_upstream_server;
        proxy_redirect off; # or specific rules to handle redirects
    }
    
  2. Use sub_filter: This module substitutes one string to another in the response. This can help to modify HTML content and replace certain strings or URLs.

     
    location / {
        proxy_pass http://your_upstream_server;
        sub_filter 'http://your_upstream_server/' '/';
        sub_filter_once off;
    }
    
  3. Handle Redirects: If your upstream server generates redirects, you might need to manage them with the proxy_redirect directive to ensure the client is redirected correctly.

Relative URL Handling:

  1. Base Tag in HTML: Ensure the correct usage of the <base> tag in the HTML <head> section. This tag specifies the base URL for all relative URLs on a page.

     
    <head>
        <base href="<https://yourdomain.com/>">
    </head>
    
  2. Relative URLs in Content: Always use relative URLs in your content, as they will automatically append to the base URL specified.

     
    <a href="/relative/path">Link</a>
    

Considerations:

  • SSL/TLS Termination: If your proxy server terminates SSL/TLS, ensure that the links generated in the proxied content are using the appropriate protocol (HTTP or HTTPS).
  • Proxy Headers: Sometimes, applications expect certain headers like X-Forwarded-Proto or X-Forwarded-Host to correctly generate URLs. Set these headers in the proxy configuration.
  • Cache-Control Headers: Proper caching headers can help avoid potential issues with outdated content.

Always test thoroughly to ensure that the content is being displayed correctly with relative URLs after setting up the Nginx reverse proxy. Adjustments might be needed based on the specific requirements of your application or website.

Make your mark

Join the writer's program

Are you a developer and love writing and sharing your knowledge with the world? Join our guest writing program and get paid for writing amazing technical guides. We'll get them to the right readers that will appreciate them.

Write for us
Writer of the month
Marin Bezhanov
Marin is a software engineer and architect with a broad range of experience working...
Build on top of Better Stack

Write a script, app or project on top of Better Stack and share it with the world. Make a public repository and share it with us at our email.

community@betterstack.com

or submit a pull request and help us build better products for everyone.

See the full list of amazing projects on github