CORS issue with link-preview-js

[klawingco]

Issue: When adding different URLs especially with HTTPS /SSL sites. CORS error will be present. This is due to the fact that link-preview-js itself is not intended to be used directly at the front-end space.

Take a look at their own GOTCHA statement

You cannot request a different domain from your web app (Browsers block cross-origin-requests). If do not know how same-origin-policy works, here is a good intro, therefore this library works on node (back-end environments) and certain mobile run-times (cordova or react-native).

Steps to reproduce

1. Add a Site with CORS Protection. I've used mine to test this one https://kllawingco.netlify.app/
2. Start the react app with HTTPS mode enabled. HTTPS=true npm start

Possible Solution(s):

1. Use a light backend to fetch this (prolly using nextjs) or a lambda function
2. Re-think if adding all of the necessary info JSON is worth it?
3. Use github build pipelines to generate the open graph details?

[justinbalaguer]

@klawingco noted.

[justinbalaguer]

fixed CORS issue - added an API to fetch data in backend
commit: c1aeaa0