0

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.

enter image description here

Khánh Đinh Ngọc
  • 85
  • 2
  • 11
  • if you receive error in the frontend for cors there is very little you can do about it. Get in touch with your backend tesm they must set right set of cors headers and you will not receive this message – Deepak Jha Jul 19 '21 at 15:58

1 Answers1

0

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);
  }
Geeth
  • 541
  • 3
  • 12