Добавление модуля CORS к одному express маршруту не работает

Question

Если я включаю CORS для всех маршрутов , запрос от внешнего интерфейса (https://localhost:3000) работает и получает правильные заголовки запроса.

const express = require('express');
const cors = require('cors');
var app = express();

app.use(cors());

app.post('/api/submitEmail', () => console.log('yay'));

Если я включаю CORS на отдельном маршруте , точно так же, как макет документа, я получаю ошибку CORS в консоли

app.post('/api/submitEmail', cors(), () => console.log('booooo'));

Ошибка:

Access to XMLHttpRequest at 'http://localhost:8000/api/submitEmail' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

Весь запрос от внешнего интерфейса ниже

const api =
  process.env.NODE_ENV === "development"
    ? "http://localhost:8000"
    : MY_PROD_URL;

const user = {
    email
  };

  axios.post(`${api}/api/submitEmail`, { user }).then(res => {
    setIsLoading(false);
    setValidationMessage(res.data);
  });

Answer 1

Вы не показываете нам детали фактического запроса, но если запрос содержит определенные особые условия, браузер попытается предварительно выполнить запрос с запросом OPTIONS, прежде чем он выдаст POST. Когда вы вставляете вызов cors() только в обработчик маршрута app.post(), запрос OPTIONS не обрабатывается, и если этот конкретный запрос перекрестного источника является типом, запускающим предварительный полет OPTIONS, то, поскольку вы его не обрабатываете запрос не будет выполнен.

Вы можете решить эту проблему, добавив следующее:

app.options('/api/submitEmail', cors(), (req, res) => res.send());

Поскольку это будет обрабатывать предварительный полет ОПЦИИ для этого указанного c маршрута.

Вы можете прочитать о том, что такое «простой запрос» здесь . Все, кроме простого запроса, требует предварительных опций. Это может быть так же просто, как установка отдельного пользовательского заголовка или типа контента, который не разрешен в простом запросе и который вызовет предварительный полет OPTIONS.

Когда вы сделали app.use(cors());, это обработано предварительный запрос OPTIONS для вас автоматически, поскольку все глаголы HTTP отправляются обработчикам app.use(), а обработчик промежуточного программного обеспечения cors() поддерживает правильные действия для запроса OPTIONS.

Кроме того, в вашем обработчике запросов POST , вам НУЖНО отправить ответ, или клиент просто будет сидеть там, ожидая ответа, и в конечном итоге истечет время ожидания.