I have an angular application on my own domain, that displays images from google storage like this:

<img src="googleUrl..."/>

The default Cache-Control is set to 3600 seconds which is way too low for me, because I want to cache the images for 1 week (the images on the storage change very rarely).

I tried to create an HttpInterceptor but it does not intercept the request that the src of the img makes.

I also tried to create a pipe and set a Cache-Control header but, the server being google, it gives me a Cross-Origin error. This is how I implemented it:

@Pipe({
    name: 'cacheResource',
})
export class CacheResourcePipe implements PipeTransform {
    constructor(private http: HttpClient, private sanitizer: DomSanitizer) {}
    transform(url): Observable<SafeUrl> {
        const headers = new HttpHeaders({
            'Cache-Control': 'public, max-age=2.592.000',
        });
        return this.http
            .get(url, {
                headers,
                responseType: 'blob',
            })
            .pipe(map((val) => URL.createObjectURL(val)));
    }
}

And then called like this:

<img [src]="'googleUrl.com' | cacheResource | async" />

(The pipe approach works with files stored on the same domain but I don't have this possibility)

Is there any way to achieve the long cache that I need without changing the server?