Spring RestControllerから角度を取得してキャッシュする

Question

私はSpringBootとAngular2を使用してクライアントサーバーアプリケーションを持っています。 サーバーからファイル名でイメージをロードしたいとします。これは正常に動作します。

クライアントにはの画像：文字列が保存されていますが、テンプレートに再度配置します。 あなたはに注意を払うかもしれませんreturn res.url;;私は間違っているかもしれない実際のリソースを使用しません。

私の目的は、イメージがキャッシュされることです。私の理解では、Webブラウザは画像を自動的にキャッシュすることができます。正しい？ しかし、キャッシングはまだ機能しませんし、誰かが調整する必要があるヒントを教えてくれますか？ 別のヘッダーが必要ですか？

サーバー（SpringBoot）

public class ImageRestController { 
    @RequestMapping(value = "/getImage/{filename:.+}", method = RequestMethod.GET) 
    public ResponseEntity<Resource> getImage(@PathVariable String filename) { 

     try { 
      String path = Paths.get(ROOT, filename).toString(); 
      Resource loader = resourceLoader.getResource("file:" + path); 
      return new ResponseEntity<Resource>(loader, HttpStatus.OK); 
     } catch (Exception e) { 
      return new ResponseEntity<Resource>(HttpStatus.NOT_FOUND); 
     } 
    } 
} 

クライアント（Angular2）

@Component({ 
    selector: 'my-image', 
    template: ` 
    <img src="{{image}}"/> 
    ` 
}) 

export class MyComponent { 

    image:string; 
    constructor(private service:MyService) {} 

    showImage(filename:string) { 
    this.service.getImage(filename) 
     .subscribe((file) => { 
      this.image = file; 
     }); 
     } 
} 

export class MyService() { 
    getImage(filename:String):Observable<any> { 
    return this.http.get(imagesUrl + "getImage/" + filename) 
     .map(this.extractUrl) 
     .catch(this.handleError); 
    } 
    extractUrl(res:Response):string { 
    return res.url; 
    } 
} 

Answer 1

あなたは、サーバー側でこのような何かを（そしておそらくあなたができる場合のETagまたはLast-Modifiedヘッダを追加することができますその情報を入手してください）：

return ResponseEntity 
      .ok() 
      .cacheControl(CacheControl.maxAge(30, TimeUnit.DAYS)) 
      .body(loader); 

HTTP caching part of the reference documentation in Springを参照してください。

あなただけのリソースを提供し、任意の追加のロジックを適用していない場合は、より良い次の操作を実行したい：

@Configuration 
public class WebConfig extends WebMvcConfigurerAdapter { 

    @Override 
    public void addResourceHandlers(ResourceHandlerRegistry registry) { 
     registry.addResourceHandler("/getImage/**") 
       .addResourceLocations("classpath:/path/to/root/") 
       .setCacheControl(CacheControl.maxAge(1, TimeUnit.DAYS).cachePublic()); 
    } 

} 

はthe other relevant part of the reference documentationを参照してください。変換を適用し、キャッシュ無効化（see this section as well）を活用することもできます。