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

Question

问题

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

这个使用节点的开放图元数据的示例非常接近我想要做的事情。

我尝试过的

我已经查看了自述文件，特别是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

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

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

API 和你的 ReactJS 应用程序是独立的实体。不要以同样的方式对待他们。ReactJS 会向您的 API 发出请求，但这就是它所做的全部。

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

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

如果您想使用 Express，请查看他们的文档。花一些时间使用它并感受一下它是如何工作的。

Express 并不是太难，也不是您唯一的选择。尽管我自己没有使用过，但我听说了有关Feathers的好消息。

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

• 哈皮.js
• Express.js
• 流星
• 德比
• 均值.js
• Sails.js
• 羽毛
• 环回