如何将 Gatsby 与 NodeJs Express 后端集成

Question

我有 Gatsby 作为我的前端和 NodeJs/Express 来获取 API 数据。我用以下内容编辑了 gatsby-config.js

module.exports = {
  /* Your site config here */

  proxy: {
    prefix: "/api",
    url: "http://localhost:4000",
  },
}

使这项工作。

它在我的开发环境中有效，但在我运行 gatsby 生产构建时无效。当我运行 gatsby 生产构建并转到实时生产网站时，没有获取 nodeJS API 数据。我错过了构建步骤。

我愿意

盖茨比构建

盖茨比发球

Answer 1

来自documentation：

请记住，代理仅在开发中有效（与 gatsby 开发），并由您来确保像 /api/todos 这样的 URL 指出生产中的正确位置。

在生产中，您需要将 HTML 请求直接发送到后端服务器，无需代理。使用 Axios 之类的库：

这里有一个来自 axios 存储库的 POST 请求示例：

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

您的浏览器会遇到 CORS 块。您的后端需要设置正确的响应标头，以便您的浏览器接受响应。在您的 express 应用中设置 cors：

const Express = require("express");
const BodyParser = require("body-parser");
const cors = require("cors");

const app = Express();
app.use(BodyParser.text({ type: "text/plain" }));

/* CORS */
// app.use(cors()); // Enable cors for all origins
app.use(cors({
  /** Use this when web frontend / production **/
  // origin: 'https://example.com',

  /** Use this when local frontend / development **/
  origin: "http://localhost:8000",
}));