Create link preview in live chat using angular typescript

Question

I have issue to create link preview in live chat for my website. When user drop a url in their chat. The preview of that link will show in chat window, to do that i need to get the meta-data in element of the resource (in that url) like: <meta property="og:image" content="https://baomoi-static.zadn.vn/web/styles/img/facebook-thumb.png">. In angular typescript project i using head() mendthod of HttpClient like bellow.

getMetaData(url: string) {
    let headers = new HttpHeaders();
    headers = headers.append('Access-Control-Allow-Headers', '*');
    headers = headers.append('Access-Control-Allow-Methods', '*');
    headers = headers.append('Access-Control-Allow-Origin', '*');
    const options = {
      headers: headers,
      reportProgress: true,
      responseType: 'json',
    };
    return this.http.head(url, <HttpOptions>options);
  }

But when i use this menthod of httpclient i received an error like this. Somebody can help fix thiss problem or give the solution to get metadata in specific URL. I am working with angular typescript project.

Answer 1

Change code as follows and try.

getMetaData(url: string) {
    let headers = new HttpHeaders();
    headers = headers.append('Access-Control-Allow-Headers', '*');
    headers = headers.append('Access-Control-Allow-Methods', '*');
    headers = headers.append('Access-Control-Allow-Origin', '*');
    headers = headers.append('Access-Control-Allow-Credentials', true);
    const options = {
      headers: headers,
      reportProgress: true,
      responseType: 'json',
    };
    return this.http.head(url, <HttpOptions>options);
  }