如何从ReactJS中的任何URL获取元数据（图像，标题，描述）

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)"

Answer 1

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

Answer 2

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 .