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

3

9

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);
    });
});


}
Orobanchaceous answered 8/10, 2018 at 8:51 Comment(8)
Could you to take a look at the XHR requests to check if the headers are actually set? You can do this by inspecting the app with Google Chrome, and then open the Network tab to see all requests.Chacha
Hello Prazy can you elaborate your commented answer I did not get where in my code ?Orobanchaceous
what is request type? get? post? can you share source of API?Unpen
its POST type and what is source of API ?Orobanchaceous
Are you certain there isn't any other level of caching involved? Could you try browser's incognito mode? And set the browser proxy to none or smth you control? Also could you create a minimal snippet / gist that we can run and reproduce your issue?Bushnell
you can't control caching by setting request headers ... the server sets those headers. you can only tell ios to ignore the headers, but I don't know how to do that with ionicProsopopoeia
Added full code of my request.Orobanchaceous
I think its not related to any header which I am passing to server its related to some cache its store with previous request and will that cache expire its throwing timeout issue.Orobanchaceous
O
2

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.

Orobanchaceous answered 19/10, 2018 at 11:55 Comment(2)
Which version of this plugin you are using .. and httpPlugin.setSSLCertMode("pinned"); is pinning is required? have you tested it on IOS?Height
its a very old answer and I don't exactly remember which version I used that time but it was working with the latest plugin version and yes I tested with my live project and it was working fine.Orobanchaceous
M
1

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

Mazuma answered 16/10, 2018 at 15:43 Comment(1)
I also tried without using self.httpPlugin.setHeader('*', 'Expires', '0'); but still no success.Orobanchaceous
S
1

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.

Spannew answered 17/10, 2018 at 11:24 Comment(3)
This is a workaround but dont think its a good solution.Height
@AbhijitChakra I completely agree with your point. my temporary solution is not efficient enough and can cause unnecessary data usage. This why I ask for block of code so I can modify and suggest according to need.Spannew
Exactly same scenario same code asked in Question. but the accepted answer is not working with the current version only on iOSHeight

© 2022 - 2024 — McMap. All rights reserved.