使用create-react-app获取Open Graph元数据

Question

问题

我正在使用create-react-app和Firebase，一直非常顺利，但是我遇到了一个问题。我想在我的应用程序中获取用户提供的URL的Open Graph元数据，但是我们知道，在浏览器中执行此操作会被阻止。

这个使用Node抓取Open Graph元数据的例子非常接近我要做的事情。

尝试过的方法

我已经查看了自述文件，特别是在开发中代理API请求部分。

我已经在这里和create-react-app Github仓库（开放和关闭）中搜索了有关内容的问题。一些结果涉及CORS和类似的问题，但仍然存在许多难以解决的差距。

我已经阅读了一些教程，建议我使用Express，但我不确定如何将其与create-react-app和webpack集成（更不用说在生产环境中如何运行了）。

我认为我只是没有完全理清这个问题的所有要素，如果有人有时间，我将不胜感激。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "1.0.10"
  },
  "dependencies": {
    "firebase": "^3.9.0",
    "material-ui": "^0.18.7",
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.0.2",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-avatar": "^2.3.0",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.2",
    "react-tap-event-plugin": "^2.0.1"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

- jami0821

Answer 1

我在这里分享一下我是如何解决这个问题的。首先，我创建了一个仅用于获取Open Graph数据的新项目。它有两个主要文件：package.json和server.js。我决定使用open-graph-scraper模块，因为它被一些在线权威机构推荐，并且在OG不可用时似乎有一些相当不错的备选方案。package.json文件如下：

{
  "name": "my-api",
  "version": "0.1.0",
  "description": "Extract Open Graph info.",
  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "express": "^4.15.4",
    "open-graph-scraper": "^2.5.4"
  },
  "devDependencies": {
    "request": "^2.81.0",
    "tape": "^4.7.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/your-repo"
  }
}

对于服务器，我将路由设置为只有父级路由/（因为这就是它的唯一用途），并使用开放图谱爬虫模块返回网站数据。

server.js

var ogs = require('open-graph-scraper');
var express = require('express');
var app = express();

app.all('/', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
 });

app.get('/', function (req, res) {
  if(req.query['url']){

    var siteUrl = req.query['url'];
    var options = {
      'url': siteUrl,
      'headers': {
        'accept-language': 'en'
      },
      'timeout': 4000
    };

    ogs(options, function (err, results, response) {
      if(results.err){
        res.json(results.err);
      } else {
        res.json(results);
        res.end();
      }
    });

  }
});

var port = process.env.PORT || 5000;
app.listen(port);

console.log("Express server listening on port %d", port);

最后，我部署到了Heroku。从这里开始，您可以使用类似于Axios的东西在ReactJS项目中查询站点数据。

发送带有以下结构的URL请求，您将收到来自OG scraper的JSON格式网站信息响应。示例请求：

http://example.heroku.com?url=http://github.com

它将返回github的Open Graph信息。

- jami0821

---

我不确定为什么这个被踩了，但如果有人对我在这里的做法有反馈，那么我可以学习如何改进我的实现。 - jami0821

Answer 2

理想的解决方案是设置一个 API 并代理请求。

1. 用户发出获取存储在第三方服务器上的 Open Graph 数据的请求。
2. 请求被传递到您的 API。
3. 您的 API 发出请求。
4. 您的 API 将数据以 JSON 格式发送回浏览器。

API 和 ReactJS 应用程序是分开的实体。不要将它们视为同一实体。ReactJS 只会向您的 API 发送请求，除此之外什么也不会做。

我使用 PHP（和 Slim 框架）编写 API，但您可以使用您最熟悉的任何语言。如果您熟悉使用 Express，则是一个很好的选择。

根据您的应用程序在生产中的大小，您可以将 ReactJS 应用程序和 API 放在同一台服务器上。或者，您可以将 ReactJS 应用程序放在 CDN 服务器上，将 API 放在另一台服务器上。对于预计会获得大量流量的应用程序，我会选择第二个选项并平衡负载 API 和 CDN。

如果您想使用 Express，请查看其文档。花些时间玩弄它，了解一下它的工作方式。

Express 并不难，而且它不是您唯一的选择。我听说过关于 Feathers 的好消息，但自己没有使用过。

以下是一些要检查的库/框架列表：

• Hapi.js
• Express.js
• Meteor
• Derby
• Mean.js
• Sails.js
• Feathers
• Loopback

- BugHunterUK

---

我认为对我来说缺失的部分是没有从两个独立的项目角度考虑：一个用于返回 OG 数据的 API 和 ReactJS 应用本身。相反，我假设我可以将它们混合在一起并继续前进。但我可以看到如果我将其拆分为两个项目，这可能会在短期内使事情变得更容易，并且可能也会在今后产生好处。 - jami0821

只需要简单地搜索，我就找到了这个Open Graph API：https://www.opengraph.io/ @BigHunterUK，你有使用过吗？这可能是一个让我能够继续专注于主要应用程序开发而不必立即陷入构建自己的API的方法。 - jami0821

我没有使用过那个服务。而且，把事情分开处理总是更好的选择。从长远来看，这样做会带来回报，并且使应用程序的水平扩展变得容易。你可以设置一个与opengraph.io相同的服务器，而不必支付使用该服务的费用 :) - BugHunterUK

我越看到已经存在的用于开放图谱的各种NPM包，就越发现自己直接使用自己的包会更容易。干杯！ - jami0821