尽管没有缓存标头，但最新的 Chrome 缓存 ajax 响应

Question

I have a simple form in a modal that gets populated by a ajax request (to a server running Django)

If I add choices to a choice field, those choices are not displaying for a few minutes on the modal. This issues only appeared after updating to the latest version of chrome (80.3987.149).

I am including no-cache headers in the ajax response like this:

    response['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response['Pragma'] = 'no-cache'
    response['Expires'] = '0'

But it doesn't seem to matter.

My ajax call method looks like this:

openAlertModalOnclick(e) {
    e.preventDefault();
    let self = this;
    $.get($(e.target).attr("href"), resp => {
        $("#alertModal").html(resp.html).foundation("open").foundation();
        })
    }).fail(() => {
        this.showErrorToast("Error occurred while loading alerts.")
    })
}

I am 90% sure this is an issue with just the latest version of chrome, as I could not reproduce it until I updated chrome. Is there anything else I can do to get chrome to stop caching the form?

Answer 1

The solution was the change the $.get call to $.ajax and pass in a cache: false parameter.

The function to open the modal now looks like this:

    openForm52AlertModalOnclick(e) {
    e.preventDefault();
    let self = this;

    SpinnerController.showSpinner();

    $.ajax({
        url: $(e.target).attr("href"),
        method: 'GET',
        cache: false,
        success: function (resp) {
            $("#alertModal").html(resp.html).foundation("open").foundation();
        },
        error: function () {
            this.showErrorToast("Error occurred while loading alerts.")
        },

    });