Angular2 IE11 caching issue

Question

I have an caching problem every time I do simple CORS get request on IE. This is not happening on Chrome. So i had to add options on get request:

            let options = new RequestOptions({
                url: this.elementsUrl,
                method: RequestMethod.Get,
                headers: this.getHeaders
            });
            return this.http.get(this.elementsUrl, options)
                .map(response => response.json())
                .catch(error => {
                        console.error('Error', error);
                        return Promise.reject(error.message || error);
                    }
                );

And I set headers to disable cache.

    private _getHeaders = new Headers({
    'If-Modified-Since': 'Mon, 26 Jul 1997 05:00:00 GMT',
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache'
});

And now I am getting info required CORS preflight and XMLHttpRequest: Network Error 0x80070005, Access is denied. Can I avoid triggering preflight options? Am I setting options correctly?

It's only related to IE that do caching of GET request. CORS is working OK on chrome. On server side is set: Access-Control-Allow-Origin: *

Why didn't you try proxy config in your server to avoid CORS issue? — Thiagz, Jun 08 '17 at 07:45
Possible duplicate of [How to create cross-domain request (Angular 2)?](https://stackoverflow.com/questions/34790051/how-to-create-cross-domain-request-angular-2) — eko, Jun 08 '17 at 07:46
@Thiagz I am only working on client side. Is it possible without changing server side? If not what should be added to server API? — playerone, Jun 08 '17 at 07:50
@echonax none of suggested solutions worked for me from that page — playerone, Jun 08 '17 at 07:53
@playerone the main idea from that answer is that CORS issues has nothing to do with Angular, it is a server-side issue — eko, Jun 08 '17 at 07:54
@echonax yes, I agree, but the strange thing is that everything works on Chrome but not on IE.if i have same get request in IE like in Chrome, I have caching issue. If I add options I am getting preflight error. I want to check if I am creating correct request with IE. From server side they put Access-Control-Allow-Origin: * — playerone, Jun 08 '17 at 07:59
@Thiagz angular app is running on apache webserver. Rest API is written in JAVA running on tomcat. — playerone, Jun 08 '17 at 08:14
You can try this option https://httpd.apache.org/docs/2.4/mod/mod_proxy.html and access the URL via the proxy path which you have created to avoid CORS issue — Thiagz, Jun 08 '17 at 08:19
@Thiagz one more thing. When sending GET request I am getting response 304 Not modified not 200 OK — playerone, Jun 08 '17 at 08:36

score 0 · Answer 1 · answered Jun 08 '17 at 09:59

On server side in case of JAVA I have created a filter as below

@PreMatching
@Provider
public class GwsApiCorsFilter implements ContainerRequestFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext)
            throws IOException {
        responseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, PATCH");
        responseContext.getHeaders().add("Access-Control-Allow-Headers", getAllowedHeaders());
        responseContext.getHeaders().add("Access-Control-Expose-Headers", getAllowedHeaders());

    }

    private String getAllowedHeaders() {
        StringBuilder sb = new StringBuilder();
        sb.append(HttpHeaders.ACCEPT).append(", ")
        .append(HttpHeaders.CONTENT_TYPE).append(", ")
        .append(HttpHeaders.AUTHORIZATION).append(", ")
        .append(HEADER_IF_MODIFIED_SINCE).append(", ")
        .append(HEADER_CACHE_CONTROL).append(", ")
        .append(HEADER_PRAGMA).append(", ")
        .append(HEADER_CONTENT_DISPOSITION).append(", ");
        return sb.toString();
    }
}

And on client in angular implement http interceptor using following tutorial

https://scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2

Add all the headers in request in the private getRequestOptionArgs(options?: RequestOptionsArgs) : RequestOptionsArgs {} function

options.headers.append(headerKeys.contentType, headers.contentType); options.headers.append(headerKeys.ifModifiedSince, headers.ifModifiedSince); options.headers.append(headerKeys.cacheControl, headers.cacheControl); options.headers.append(headerKeys.pragma, headers.pragma); — umar, Jun 08 '17 at 10:00

Angular2 IE11 caching issue

1 Answers1