如何将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数据不会被提取。我错过了一个构建步骤。

我做

gatsby构建

盖茨比发球

Answer 1

来自文档：

请记住，代理只在开发中起作用(使用gatsbydevelopment(，并且由您来确保像/api/todos这样的URL指向正确的生产地点。

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

这里有一个来自axios repo的POST请求示例：

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

您将在浏览器中遇到一个CORS块。您的后端需要设置正确的响应标头，以便浏览器接受响应。在您的快递应用程序中设置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",
}));