Reactjs 使用create react app获取打开的图形元数据 问题

我正在使用Firebase，这是一个梦想，但我遇到了路障。我想将从用户提供的URL获取开放图形元数据合并到我的应用程序中，但正如我们所知，在浏览器中这样做是无法实现的

这个例子非常接近我要做的

我试过的 我特别回顾了自述文件

我在这里和CreateReact应用程序GithubRepo（打开和关闭）上搜索了相关问题。在CORS和类似的系统上已经有了一些结果，但是在如何整合一些东西来实现这一点上仍然有相当多的差距

我读过图坦卡蒙的建议，建议我使用Express，但我不确定如何将其与CreateReact应用程序和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"
  }
}

---

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

用户请求获取驻留在第三方服务器上的开放图形数据

请求被传递到您的API

您的API发出请求

API以JSON格式将数据发送回浏览器

API和ReactJS应用程序是独立的实体。不要对他们一视同仁。ReactJS将向您的API发出请求，但仅此而已

我在API中使用PHP（和Slim框架），但是您可以使用您觉得最舒服的任何语言。如果您使用方便，Express是一个不错的选择

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

如果您想使用Express，请查看他们的文档。花点时间玩一下，感受一下事情是如何运作的

快递不是很难，也不是你唯一的选择。虽然我自己没用过，但我听说了一些好东西

以下是要签出的一些库/框架的列表：

---

我只是在这里用我自己解决这个问题的方法来支付

首先，我创建了一个新项目，只用于获取打开的图形数据。它有两个主要文件

package.json

和

server.js

我决定使用这个模块，因为它是由一些在线权威机构推荐的，当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 graphscraper模块返回站点数据

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

最后，我。从这里，您可以在ReactJS项目中使用类似的方法查询站点数据

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

---

它将返回github的Open Graph信息。

我认为我缺少的部分并没有考虑这两个独立的项目：用于返回OG数据的API和ReactJS应用程序本身。相反，我认为我可以把这两个东西混在一起，然后上路。但我可以看到，如果我把它分为两个项目，它如何在短期内让我的工作变得更轻松，也许将来也会变得更轻松。只需在谷歌上搜索一下，我就找到了这个开放图形API：有没有使用@BigHunterUK的经验？这可能是一种让我继续在主应用程序本身上工作的方式，而不会陷入立即构建自己的API的泥潭。我没有任何使用该服务的经验。是的，把事情分开总是比较好的。从长远来看，它是有回报的，并使横向扩展应用程序变得容易。您可以设置一个与opengraph.io相同的服务器，并且不必支付使用该服务的费用：）我越是关注opengraph的所有不同NPM包，我就越觉得直接使用自己的NPM包是多么容易。干杯我不知道为什么会被否决，但如果有人对我在这里的表现有反馈，那么我可以学习如何改进我的实现。