How do you refresh a page and persist the Referer header

Question

I need to pragmatically refresh my page (for example location.reload(true);) but also maintain the original http referer header.

the http referer header persists if you click the refresh button on your browser. I know there are a ton of different ways to refresh the page in javasript, is there a way to maintain the http referer?

Thanks!

Answer 1

You can't force the value of the document.referrer to be something specific from a reload. But there are workarounds.

A quick, unobtrusive technique is to persist this state in the user's sessionStorage or localStorage.

// Get the last known referrer
const referrer = JSON.parse(localStorage.getItem('myApp')).referrer;

// Save the current referrer.
localStorage.setItem('myApp', JSON.stringify({
    referrer : document.referrer
}));

You could also tie some state to a reload by storing it in a query string or fragment identifier.

const referrer = document.referrer;

if (referrer) {

    let query = location.search;

    if (query) {
        query += '&';
    }

    query += 'referrer=' + encodeURIComponent(referrer);

    location.search = query;  // reloads the page
}

However, if you don't have much control over the page content, the query string approach can be problematic because some applications (front-end and back-end) that see a query will think they need to do something special. So it has a potential for unintended side effects.