Vue-resource can cancel the cache as Ajax do

[ya00la]

I use vue-resource for data requests, but found that the second request the same data source will appear the cache data, not the latest data, I would like to ask how to cancel the vue-resource cache settings

ajax cancle cache setting (cache:false)
$.ajax({
type: data_method,
url: data_url,
data:data_string,
dataType: 'json',
cache:false,
success: function(data){
console.log(data)
}
},

[carlosingles]

I was having the same issue in IE, I fixed this on the server side by adding a Header on requests that were submitted by AJAX.

vue-resource already adds a X-Requested-With: XMLHttpRequest header, so all I had to do was check for this header on my server and then add a Expires: -1 Header on the response.

I am using Express, so this was fairly simple since there's already a req.xhr value that checks for the above header. I added the following middleware to the start of my app:

app.use(function(req, res, next){
  // check for AJAX request and turn off caching
  if(req.xhr) res.set('Expires', '-1')
  // continue
  next()
})

[libertyAlone]

you can set http request header Cache-Control

this.$http.get('/api', param, {
   headers: {
       'Cache-Control': 'no-cache'
   }
}).then(function (data) {});

[jakejscott]

I'm doing it like this but I need to make it safe

// http request/response interceptors
Vue.http.interceptors.push({
    request: function (request) {
        // todo(jake): do this properly, don't just blindly append ?..
        request.url += "?" + new Date().getTime();        
        return request;
    },
    response: function (response) {
        return response;
    }
});

[potasiyam]

@libertyAlone I tried with 'Cache-Control': 'no-cache' in my request header. But my browser is still caching the request. Temporarily solved it by appending timestamp with URL, but I need better solution. I also vote for a flag like jQuery ajax in vue-resource options.

[libern]

@superlogical Thanks for the solution

[jakejscott]

New solution

Vue.http.interceptors.push((request, next) => {
  request.url += (request.url.indexOf('?') > 0 ? '&' : '?') + `cb=${new Date().getTime()}`
  next()
})

[khalidazza]

Hi folks,
I have the same issue and i tried all solutions listed before but the issue persist, i don't really know where the problem came from, i thought that chrome caches responses but the fuzzy situation is, why chrome keep cache from invited and private session?
PS: mozilla firefox works fine but i need the VueJs Devtools

[roboriaan]

Christ! Internet explorer must get on board or die