У меня ошибка CORS с приложением HEROKU, отправка запроса со страницы github

Question

Я создал небольшое приложение `nodejs` для рассылки и развернул его на` heroku`.

В моем интерфейсе есть контактная форма, и он размещен на страницах github. Я включил cors на моем бэкэнде, но все же, когда я отправляю форму, я получаю cors ошибку.

Вот фрагмент кода из моего бэкэнда.

const express = require("express");
const nodemailer = require("nodemailer");
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();

app.use(cors());

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, DELETE, OPTIONS, PUT"
  );
  next();
});

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post("/contact", (req, res, next) => {
  const transporter = nodemailer.createTransport({
    service: "gmail",...

и мой запрос на веб-интерфейсе выглядит так.

const submitHandler = e => {
  e.preventDefault()
  if (formState.formIsValid) {
    setIsSending(true)
    axios
      .post("https://portfolio-kk-mail.herokuapp.com/contact",
        {
          sender: formState.inputValues.email,
          subject: formState.inputValues.subject,
          message: formState.inputValues.message,
        },
        {
          headers: {"Content-Type": "application/json"},
        }
      )
      .then(res => {
         setIsSending(false)
         setError(false)
         submitBtn.current.style.background =
           "linear-gradient(to right, #4BB543, #4BB54344)"
         submitBtn.current.style.border = "1px solid #4BB543"
      })
      .catch(err => {
        setIsSending(false)
        setError(true)
        submitBtn.current.style.border = "1px solid #B00020"
        submitBtn.current.style.background =
         "linear-gradient(to right, #B00020, #B0002044)"
      })
   }
}

Понятия не имею, что мне не хватает?

Answer 1

Поскольку вы устанавливаете тип содержимого как JSON, ваш запрос CORS автоматически становится предварительным запросом. Единственные типы контента, для которых не требуется предварительная проверка:

application/x-www-form-urlencoded
multipart/form-data
text/plain

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

app.options('/contact', (req, res) => {
    res.sendStatus(204);
});

Просто поместите его после промежуточного программного обеспечения CORS.

Вы можете прочитать о критериях для простых запросов , которые не выполняются предварительно, и вы можете прочитать о Preflighted Rquests в этих ссылках на MDN.