title: ANGULAR : how to get a video from the backend sending jwt token in headers
body: <p>hope you all doing well, 
  i'm stacking in a real problem with Angular</p>
  
  <p>the backend send me a object contains an Arrays of url for attachements (images or videos): </p>
  
  <pre><code>attachments:[{
      id: 4
      title: "d439e68f-ece6-4d80-a0b7-111fb337a8e6.jpeg"
      content: null
      file: "http://api-coldplace-dev.piman-analytics.fr/api/tutorial/4/attachments/4"
      type: "image"
      mime: "image/jpeg"
      duration: 0
      order: 0
      cover: 0
      external_link: 0
      },{
      id: 5
      title: "file_example_MP4_480_1_5MG.mp4"
      content: null
      file: "http://api-coldplace-dev.piman-analytics.fr/api/tutorial/4/attachments/5"
      type: "video"
      mime: "video/mp4"
      duration: 31
      order: 1
      cover: 0
      external_link: 0
  }]
  </code></pre>
  
  <p>to get that attachement, you have to do it with another http request GET to url (attachement.file ) sending jwt token in headers of that request (secure attachement).</p>
  
  <p><a href="https://i.stack.imgur.com/kEv2H.png" rel="nofollow noreferrer">Example</a></p>
  
  <p><a href="https://i.stack.imgur.com/gym6m.jpg" rel="nofollow noreferrer">example of response</a></p>
  
  <p>i do this with secure pipe </p>
  
  <p>HTML : </p>
  
  <pre><code> &lt;img *ngIf="file?.type?.toString()?.includes('image')"
                         [src]="file?.source | secure | async "
                         height="70px"
                         width="70px"/&gt;
   &lt;video *ngIf="file?.type?.toString()?.includes('video')"
                           height="70px"
                           width="70px"
                           [src]="file?.source | secure | async"
                           (loadedmetadata)="getDuration($event, i)"&gt;
  </code></pre>
  
  <p>PIPE : </p>
  
  <pre><code>@Pipe({
    name: 'secure'
  })
  export class SecurePipe implements PipeTransform {
  
    constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }
  
    transform(url): Observable&lt;SafeUrl&gt; {
      return this.http
        .get(url, { responseType: 'blob' })
        .map(val =&gt; this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
    }
  
  }
  
  </code></pre>
  
  <p>My problem is all of this works just for les attachements of type images, when it's a video, the request always get failed </p>
  
  <p>example : 
  <a href="https://i.stack.imgur.com/bEy9W.png" rel="nofollow noreferrer">video request </a></p>
  
  <p><a href="https://i.stack.imgur.com/en3In.png" rel="nofollow noreferrer">failed</a></p>
  
  <p>i don't know if the type video, i have to do with another way or something like that, but i'm sure that the  problem is not from the backend, cause i tested in postman and i'm getting always the video </p>
  
  <p>any help , please</p>