CORS на заголовке сервера

Question

Я развертываю простой сервер узлов и приложение React для Netlify. Приложение React отправляет запрос API на сервер и использует cors через const cors = require("cors"); в версии 2.8.5.

Сначала я указал следующее (server.js)

app.use(
  cors({
    origin: CLIENT_ORIGIN
  })
);

, который, кажется, только сообщает серверу «Я использую CORS», но конкретно не устанавливает никаких заголовков и не разрешает веб-сайтам из белого списка доступ к серверу. Затем я устанавливаю CLIENT_ORIGIN в файле .env в моей среде разработки и через Build environment variables в Netlify. Я развернул новую сборку как для сервера, так и для внешнего интерфейса, однако, должно быть, я где-то ошибся:

Access to fetch at 'https://serverUrl.com/example/get' from origin 
'https://react-app-example.com' has been blocked by CORS policy: No 'Access- 
Control-Allow-Origin' header is present on the requested resource. If an 
opaque response serves your needs, set the request's mode to 'no-cors' to 
fetch the resource with CORS disabled.

Затем я попытался установить:

app.use(function(req, res, next) {
  res.header(
    "Access-Control-Allow-Origin",
    "https://react-app-example.com"
  );
  res.header("Access-Control-Allow-Headers", "Content-Type,Authorization");
  res.header("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE");
  if (req.method === "OPTIONS") {
    return res.sendStatus(204);
  }
  next();
});

, который также не работал. Сообщение об ошибке осталось прежним. Что меня раздражает, так это то, что у меня есть аналог, созданный несколько месяцев назад, который построен очень похожим образом, но остается на герою. Те же методы, что описаны выше, работают без проблем.

Что мне не хватает?

Answer 1

Попробовав разные вещи, я наконец-то пришел к тому, что Netlify не поддерживает приложения Node сам по себе ( без лишних утомительных настроек ).

Ближайшее решение можно найти здесь, в другом ответе или через другой сервис, такой как Heroku. Основная проблема, которую я имею с heroku, заключается в том, что когда dyno (в моем случае сервер, предоставляющий маршруты API) не вызывается некоторое время, он переходит в спящий режим для экономии ресурсов, и, в свою очередь, для ответа требуется гораздо больше времени. по первому звонку. Пока не нашли другого бесплатного решения для приложений узлов / экспрессов, которые обслуживают маршруты API.

ОБНОВЛЕНИЕ: Heroku и Netlify не подойдут, если вы не добавите следующие параметры CORS в бэкэнд:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", CLIENT_ORIGIN);
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  res.header("Access-Control-Allow-Methods", "GET,POST,PUT,PATCH,DELETE");
  res.header("Access-Control-Allow-Credentials", true); <--- this is the only different line I added.
  if (req.method === "OPTIONS") {
    return res.sendStatus(204);
  }
  next();
});

И затем следующее к внешнему запросу через fetch:

fetch(`${API_BASE_URL}/dept/get/`, {
      method: 'GET',
      credentials: 'include', <-- this is the most important change
    })
      .then((res) => {...}