CORS issue all of a sudden

[ClydSpyd]

Hello.

I have been using your fantastic package for a month or so now with no problem, but for some reason I now seem to be getting a CORS error for all links.

Has something changed??

Cheers!
Dave

[YuriyMorkovnik]

same

[ptenteromano]

Yeah, I started getting the CORS errors as well. But they seem sporadic and hard to track down.

Maybe this is the problem: it looks like the heroku proxy server that @Dhaiwat10 uses was down (at the time of my writing). https://rlp-proxy.herokuapp.com/. He explains how the heroku server makes it all run here: #14 (comment)

edit: the proxy server is back up again and works

[Dhaiwat10]

Hey, like @ptenteromano said the public proxy probably got overloaded with too many requests. Highly suggest forking it and deploying your own!

[akash-wizard]

i also getting cors error how can deal with any one have answer please help

[ptenteromano]

I avoided using the proxy server altogether. You can pass in your own custom fetcher prop, which collects metadata from explicitly defined values. The explicitImgSrc is used as a fallback.

Look into the docs / source code for more information.

const metaData = [{
  title: ["Example Title"],
  description: ["Example description..."],
  image: "https://example.com/image.jpg",
  url: "https://example.com/article",
  siteName: ["Example Site"],
  hostname: "example.com"
}]; // I defined the elements as a MetaData type previously.

// Adapt the loader response to the LinkPreview component
async function adapter(url: string): Promise<MetaData> {
  const data = metaData.find((d) => d.url === url) as MetaData;
  return Promise.resolve(data);
}

const urlData = {
  url: "https://example.com/article", 
 explicitImgSrc: "https://images.unsplash.com/this-is-optional"
}

Then in your component, you can call it:

  <LinkPreview
    height="100%"
    url={urlData.url}
    fetcher={adapter}
    explicitImageSrc={urlData.explicitImgSrc}
  />