Как интегрировать Gatsby с NodeJs Express Backend

Question

У меня в качестве внешнего интерфейса Gatsby и NodeJs / Express для получения данных API. Для этого я отредактировал gatsby-config.js со следующим

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

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

.

Он работает в моей среде разработки, но не при запуске рабочей сборки gatsby. Когда я запускаю производственную сборку gatsby и захожу на действующий производственный веб-сайт, данные API nodeJS не извлекаются. Мне не хватает шага сборки.

Я делаю

сборка Гэтсби

Служба Гэтсби

Answer 1

Из документации :

Имейте в виду, что прокси влияет только на разработку (с разработкой gatsby), и вы должны убедиться, что URL-адреса, такие как /API / todos указывают на правильное место в производственном процессе.

В производственном процессе вам необходимо отправлять HTML-запросы непосредственно на внутренний сервер без прокси-сервера. Используйте такую ​​библиотеку, как Axios :

Вот пример из репозитория axios для запроса 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",
}));