GET https://cors-anywhere.herokuapp.com/https://www.google.com/ [HTTP/1.1 403 Forbidden 1270ms] about react-tiny-link

[juliettebeaudet]

I am trying out a sample link in my app which is https://www.google.com/
the package works fine showing the card thumbnail but the showGraphic={true} is not showing any image
but instead giving me this error on the console

    <ReactTinyLink
      cardSize="small"
      showGraphic={true}
      maxLine={2}
      minLine={1}
      url='https://www.google.com/'
    />

how to show the image?

Hi @unit-002,
You should change your proxy, since cors-anywhere.herokuapp.com stopped serving as an open one since January (see announcement: https://github.com/Rob--W/cors-anywhere/issues/301 ). You can work with cors.bridged instead (see article https://medium.com/bridgedxyz/cors-anywhere-for-everyone-free-reliable-cors-proxy-service-73507192714e), like so:

<ReactTinyLink
      cardSize="small"
      showGraphic={true}
      maxLine={2}
      minLine={1}
      url='https://www.google.com/'
      proxyUrl="https://cors.bridged.cc"
/>

[unit-002]

<ReactTinyLink
      cardSize="small"
      showGraphic={true}
      maxLine={2}
      minLine={1}
      url='https://www.google.com/'
      proxyUrl="https://cors.bridged.cc"
/>

I will try this thanks
upadate: the preview is displaying now, thanks a lot!

[msilucifer]

Thanks, it works fine. :)

[winhtaikaung]

Hi @unit-002
Have you play around with the code sandbox ?

https://codesandbox.io/s/monp6n08n8

So that you can check the implementation with yours.

[unit-002]

Hi @unit-002
Have you play around with the code sandbox ?

https://codesandbox.io/s/monp6n08n8

So that you can check the implementation with yours.

I did checked the codesandbox and follow the sample code, the image shows in code sandbox but doesn't show on mine still having the forbidden error but aside from the error the link works fine it goes to the right link when clicked. What could be the cause? Is it because I am on localhost?

here my list of dependencies aside from react tiny link

"@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^4.6.0",
    "bs-custom-file-input": "^1.3.4",
    "dotenv": "^8.2.0",
    "firebase": "^8.3.0",
    "moment": "^2.29.1",
    "react": "^17.0.1",
    "react-bootstrap": "^1.5.1",
    "react-dom": "^17.0.1",
    "react-draggable": "^4.4.3",
    "react-icons": "^4.2.0",
    "react-infinite-scroll-component": "^6.0.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-textarea-autosize": "^8.3.2",
    "uuid": "^8.3.2",
    "web-vitals": "^1.0.1"

[winhtaikaung]

I will close this issue for now then. 😀