Fetch API - в запрашиваемом ресурсе отсутствует заголовок "Access-Control-Allow-Origin"

Question

Фон: у меня есть два приложения. Это приложение Express Node, подключенное к базе данных Mongo. Другой - это базовое веб-приложение, которое делает POST запросы к приложению Node через Fetch API для получения данных из Mongo.

Проблема: хотя я не получаю CORS ошибки на моем локальном компьютере, я получаю сообщение об ошибке ниже, как только я разверну свое основное веб-приложение в производство. Веб-приложение, которое делает POST запрос к приложению Node и дает мне это:

Загрузка не может быть загружена (ссылка на приложение узла). В запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Следовательно, Origin (основной URL-адрес веб-приложения) не имеет доступа. Ответ имеет HTTP-код состояния 503. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса "no-cors", чтобы получить ресурс с отключенным CORS.

POST Похоже, что запрос работает, и данные сохраняются в Mongo, но эта ошибка помечается в Heroku как "Критическая ошибка" и является довольно неприятной.

Я понимаю, что мог бы установить no-cors опция в Fetch, но я считаю, что это необходимо, так как я делаю запрос к URL, который отличается от источника. Правильно?

Код приложения Express Node

В моем app.js Я установил правильные заголовки, чтобы другие приложения могли отправлять запросы из разных источников.

app.js

// Add headers so we can make API requests
app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

маршруты / API / api.js

router.post('/users/:url/upload-csv/:csv_name', (req, res) => {
  let csv_name = req.params.csv_name;
  let csv_string = csv_name+req.body.csv_string;

  User.findOne({url: req.params.url})
    .then((user) => {
      if (user.csv_files.length === 0) {
        user.csv_files.push(csv_string);
      } else {
        let foundExistingCSV = false;
        for (var i = 0; i < user.csv_files.length; i++) {
          if (user.csv_files[i].includes(csv_name)) {
            foundExistingCSV  = true;
            user.csv_files[i] = csv_string;
            break;
          }
        }
        if (!foundExistingCSV) user.csv_files.push(csv_string);
      }
      user.markModified('csv_files');
      user.save();

      res.status(204);
    })
    .catch((err) => {
      console.log(err);
      res.status(400);
    });
});

Базовый код веб-приложения

POST запрос я делаю

utils.js

utils.exportToMongo = functions(table, name) {
  var exportPlugin = table.getPlugin('exportFile');
  var csv_string   = exportPlugin.exportAsString('csv');

  // Upload the CSV string and its name to Users DB
  fetch(`${utils.fetchUserURL()}/upload-csv/${name}`, {
    method: 'POST',
    body: JSON.stringify({csv_string: csv_string}),
    headers: new Headers({
      'Content-Type': 'application/json',
      Accept: 'application/json',
    })
  }).then((res) => {
    return {};
  }).catch((error) => {
    console.log(error);
    return {};
  });
}

Как я могу удалить 503 ошибка? Любое понимание будет с благодарностью!

Answer 1

HTTP 503 указывает на некоторый сбой на стороне сервера, верно? Или может даже указывать, что сервер просто не отвечает вообще - например, случай может быть, ваш бэкэнд пытается передать запрос на сервер на другой порт, но сервер даже не работает и прослушивает ожидаемый порт,

Итак, пытались ли вы сделать один и тот же запрос POST, используя другой клиент (curl, Postman или что-то еще), и вы когда-нибудь получали 2xx успешных ответов для POST, а не 503?

В любом случае, если вы видите 503 на стороне клиента, на стороне сервера должна быть зарегистрирована какая-то ошибка, чтобы указать, что не удалось и почему. Поэтому, чтобы решить вашу проблему, вы, вероятно, захотите начать с просмотра журналов вашего сервера, чтобы найти причину 503.

Что касается сообщения об ошибке CORS, это ожидается, потому что во многих или в большинстве случаев, если возникает ошибка 5xx, серверы не отправляют Access-Control-Allow-Origin заголовок ответа в ответе - вместо этого сервер может отправлять этот заголовок только для ответов 2xx и 3xx (перенаправление).

Таким образом, если вы решите эту проблему 503, так что вы сможете получить успешный ответ, вы можете обнаружить, что ваша конфигурация CORS уже работает, как и ожидалось, и вам нечего исправить.

Answer 2

У меня была такая же проблема, сервер не поддерживает перекрестный запрос. Разработчик API должен изменить Access-Control-Allow-Origin на * (имеется в виду любое происхождение). Иногда jsonp-запрос будет обходиться, если он не работает, Google Chrome предоставляет плагины для изменения плагина источника.