Question

问题

我正在使用create-react-app与Firebase，这是一个梦想，但我已经遇到了一个道路障碍。我想在我的应用程序中加入从用户提供的URL中获取Open Graph元数据，但据我们所知，这在浏览器中完成时会被阻止。

这个Open Graph Metadata With Node的例子与我正在尝试的非常接近。

我尝试了什么

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

我已经在这里以及create-react-app Github repo（打开和关闭）搜索了相关的问题。一些结果已经回归到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

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

用户请求获取驻留在第三方服务器上的Open Graph数据
请求将传递给您的API
您的API提出请求
您的API以JSON格式将数据发送回浏览器

API和您的ReactJS应用程序是独立的实体。不要对待它们。 ReactJS会向您的API发出请求，但这就是它所能做的。

我为我的API使用PHP（和Slim框架），但您可以使用您认为最舒服的语言。如果您习惯使用Express，Express是一个不错的选择。

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

如果您想使用Express，请查看他们的文档。花一些时间玩它并了解事情的运作方式。

快递并不太难，这不是你唯一的选择。我听到Feathers的好消息，虽然我自己没有用过它。

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

Answer 2

在这里向我付钱，我自己解决了这个问题。

首先，我创建了一个新项目，仅用于获取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"
  }
}

对于服务器，我将路由设置为父路由/（因为它实际上只是它的用途），并使用open graph scraper模块返回站点数据。 / p>

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。从这里，您可以使用ReactJS项目中的Axios等内容查询网站数据。

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

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

它将返回github的Open Graph信息。

使用create-react-app获取Open Graph Metadata

问题

我尝试了什么

2 个答案: