reactjs - 使用 create-react-app 获取开放图元数据

Question

问题

我正在使用create-react-app使用 Firebase 一直是我的梦想，但我遇到了障碍。我想将从用户提供的 URL 获取 Open Graph 元数据的功能合并到我的应用程序中，但据我们所知，在浏览器中完成此操作会被阻止。

此示例 Open Graph Metadata With Node非常接近我想做的事情。

我尝试过的

我已经查看了自述文件，特别是 Proxying API Requests in Development .

我已经在此处和 create-react-app Github 存储库(开放和关闭)上搜索了相关问题。 CORS 和类似的结果已经返回，但在如何整合某些东西来实现这一目标方面仍然存在相当大的差距。

我读过建议我应该使用 Express 的评论，但我不确定如何将其与 create-react-app 和 webpack 结合起来(更不用说这在生产中如何工作)。

我认为我还没有完全将所有部分放在一起来完成此任务，如果有人有时间，我将不胜感激。

package.json 文件

{
  "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"
  }
}

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

对于服务器，我将路由设置为父路由 / (因为这实际上只是它的用途)并使用开放图 scraper 模块返回站点数据。

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

最后，我deployed to Heroku 。从这里，您可以使用类似 Axios 查询站点数据。在你的 ReactJS 项目中。

通过向具有以下结构的 URL 发送请求，您将收到来自 OG 抓取工具的响应，其中包含 JSON 格式的站点信息。请求示例:

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

它将返回 github 的 Open Graph 信息。