如何将Gatsby与NodeJs Express后端集成

时间:2019-11-03 15:51:12

标签: node.js reactjs express gatsby

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

null

使它起作用。

它在我的开发环境中有效,但在运行gatsby生产版本时无效。当我运行gatsby生产版本并转到实时生产网站时,未获取nodeJS API数据。我缺少构建步骤。

我愿意

gatsby构建

盖茨比服务

1 个答案:

答案 0 :(得分:2)

来自documentation

  

请记住,代理仅对开发有效(使用gatsby   开发),这取决于您确保/ api / todos之类的网址   指向生产中的正确位置。

在生产中,您需要将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",
}));