How to fetch metadata (image, title, description) from any url in ReactJS

Question

I want to fetch metadata (title, image, description) from a url like a Medium article and then display it as a post on my blog. How to do it. I am using ReactJS

I tried using fetch and axios.get but it always shows error in the browser's console. "NetworkError when attempting to fetch resource." "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://medium.com/s/jessica-valenti/hateful-fox-news-rhetoric-can-do-real-world-harm-52e26008caa5. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)"

score 6 · Accepted Answer · answered May 01 '19 at 02:07

6

Use open-graph-scraper and make the request from backend-server. It works like a delight

answered May 01 '19 at 02:07

Ankur Singh

133
1
12

I was also having this issue, Thanks for solution. – 4LPH4 Sep 13 '19 at 09:08

score 1 · Answer 2 · answered Apr 16 '19 at 12:21

1

You are not allowed to request request URL's that don't have the CORS header (Access-Control-Allow-Origin: *). This is due security reasons of medium and other pages. They need to actively enable that header to allow clients to request it from JS.

You will need a backend that does the request for you (nodejs, python, php etc). You could also try to use https://cors-anywhere.herokuapp.com.

answered Apr 16 '19 at 12:21

Tobias Lins

2,543
19
22

Doesn't OpenGraph solve this? – Paul Razvan Berg Dec 13 '21 at 20:59
this link not working – Md Sifatul Islam Sep 01 '22 at 11:26

How to fetch metadata (image, title, description) from any url in ReactJS

2 Answers2