如何从 ReactJS 中的任何 url 中获取元数据(图像、标题、描述)
How to fetch metadata (image, title, description) from any url in ReactJS
我想从 url 中获取元数据(标题、图像、描述),例如 Medium 文章,然后将其显示为 post 在我的博客上。怎么做。我正在使用 ReactJS
我尝试使用 fetch 和 axios.get,但它总是在浏览器的控制台中显示错误。
"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)"
您不能请求 URL 没有 CORS header (Access-Control-Allow-Origin: *
) 的请求。
这是由于媒体和其他页面的安全原因。他们需要主动启用 header 以允许客户端从 JS 请求它。
您将需要一个后端来为您处理请求(nodejs、python、php 等)。您也可以尝试使用 https://cors-anywhere.herokuapp.com
.
使用 open-graph-scraper 并从后端服务器发出请求。工作起来很愉快
我想从 url 中获取元数据(标题、图像、描述),例如 Medium 文章,然后将其显示为 post 在我的博客上。怎么做。我正在使用 ReactJS
我尝试使用 fetch 和 axios.get,但它总是在浏览器的控制台中显示错误。 "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)"
您不能请求 URL 没有 CORS header (Access-Control-Allow-Origin: *
) 的请求。
这是由于媒体和其他页面的安全原因。他们需要主动启用 header 以允许客户端从 JS 请求它。
您将需要一个后端来为您处理请求(nodejs、python、php 等)。您也可以尝试使用 https://cors-anywhere.herokuapp.com
.
使用 open-graph-scraper 并从后端服务器发出请求。工作起来很愉快