How to stop caching my HTTP request & response in ionic 3

Question

I want to stop caching my API request and response which the native-http plugin stored its cache and its creating issue with my app.

All-time API works fine but when I get a 404 or 401 error from the server it will cache it in my app and then after all time I will get a timeout error with 1 status.

To overcome this issue I need to uninstall the app and reinstall it again will work as expected.

Any Idea How to stop caching HTTP requests and responses?

Or how to resolve the issue of the timeout with 1 status?

I have tried the below things in my request header but still no success.

self.httpPlugin.setHeader('*', 'authorization', 'Bearer ' + token);
self.httpPlugin.setHeader('*', 'Cache-control', 'no-cache');
self.httpPlugin.setHeader('*', 'Cache-control', 'no-store');
self.httpPlugin.setHeader('*', 'Expires', '0');
self.httpPlugin.setHeader('*', 'Pragma', 'no-cache');

Also added a dummy unique param in my request to make the unique request of my API call like below.

self.httpPlugin.setHeader('*', 'ExtraDate', new Date().toString());

Anyone facing this kind of issue in Ionic 3?

Tried this thread suggestions but no luck at all.

Suggest any solution for this issue.

Edit:

Full Request code:

/**
   * Get Search result from server.
   */
getCaseListBySearchText(searchText: string): Observable<any> {
    let self = this;

  return Observable.create(function(observer) {
    self.getToken().then(token => {
      console.log("Token : ", token);

      // let rand = Math.random();
      self.httpPlugin.setHeader("*", "authorization", "Bearer " + token);
      self.httpPlugin.setHeader("*", "Cache-control", "no-cache");
      self.httpPlugin.setHeader("*", "Cache-control", "no-store");
      // self.httpPlugin.setHeader("*", "Expires", "0");
      self.httpPlugin.setHeader("*", "Cache-control", "max-age=0");
      self.httpPlugin.setHeader("*", "Pragma", "no-cache");
      self.httpPlugin.setHeader("*", "ExtraDate", new Date().toString());

      self.httpPlugin
        .get(self.url + "/CaseList?caseNum=" + searchText, {}, {})
        .then(response => {
          console.log("Response Success : " + JSON.stringify(response));
          let jsonResponse = JSON.parse(response.data);
          console.log("JSON OBJECT RESPONSE : " + jsonResponse);
          observer.next(jsonResponse);
        })
        .catch(error => {
          if (error.status == 403) {
            console.log("Token expired : " + JSON.stringify(error));
            self.isTokenExpired = true;
            //Removing Old Token
            self.storage.remove(Constants.AUTH_DATA);
            observer.error(error);
          } else {
            console.log("Error : " + error);
            console.log("Error " + JSON.stringify(error));
            observer.error(error);
          }
        });
    })
    .catch(error => {
      console.log("Error : " + error);
      observer.error(error);
    });
});


}

Answer 1

After lots of R&D and web searches regarding the above issue, I found a solution to clean my request cache as above all header not work to clean cache.

In the HTTP Advanced plugin, there is one method to clear my cookies.

clearCookies()

Clear all cookies.

By using the above method in my class constructor to clear cookies before calling any API.

So what it will do clear all my cookies and my issue related to old cookies will be solved in this way.

constructor(
    public storage: Storage,
    public httpPlugin: HTTP,
    private platform: Platform
  ) {
    // enable SSL pinning
    httpPlugin.setSSLCertMode("pinned");
    //Clear old cookies
    httpPlugin.clearCookies();
  }

The above code solves my issue.

Thanks all for your quick guidance and suggestions.

comment on this if this is not the right way to clear my old request data.

Answer 2

You could have a look at the response headers to identify what the server tells back to your client about caching. You can also try forcing a new response from the server by setting Cache-Control: max-age=0.

Also, i would avoid setting Expires header to 0 as this is usually set by servers and is defined as a date like '1 Jan 1970 00:00:00 GMT'. In total, these three request headers should be well enough for no-cache mechanism.

• pragma: no-cache
• cache-control: no-cache
• cache-control: max-age=0

Most of the behaviors about http caching is explained in the corresponding RFC:

https://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html

Answer 3

Usually if you add random number in your requested URL header. you can achieve it.

Share full block code with me i will try my best to help you.