Slack incoming webhook: поле заголовка запроса Тип контента не разрешен заголовками Access-Control-Allow-Headers в предполетном ответе

Я пытаюсь опубликовать сообщение проскальзывания через API-интерфейс fetch в браузере:

fetch('https://hooks.slack.com/services/xxx/xxx/xx', {
  method: 'post',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-type': 'application/json'
  },
  body: JSON.stringify({text: 'Hi there'})
})
  .then(response => console.log)
  .catch(error => console.error);
};

Появляется следующее сообщение об ошибке:

Fetch API cannot load:
https://hooks.slack.com/services/xxxxxxx/xxxxx. 
Request header field Content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Что делать?

Ответ 1

Это вялый API конечных точек, к сожалению, по- видимому, сломана в обработке запросов кросс происхождения из интерфейса JavaScript кода в том, что оно не обрабатывать предполетной CORS OPTIONS запрос, как должно, поэтому единственное решение, кажется, опускаем Content-Type заголовка.

Таким образом, похоже, что вам нужно удалить следующее из части headers вашего кода запроса:

'Content-type': 'application/json'

Эта часть 'Content-type': 'application/json' запускает ваш браузер, чтобы выполнить запрос OPTIONS перед отправкой. Таким образом, для вашего браузера, чтобы ваш внешний код JavaScript-кода отправлял запрос POST вы пытаетесь сделать, конечная точка https://hooks.slack.com/services должна вернуть заголовок ответа Access-Control-Allow-Headers который содержит Content-Type в его значении.

Но эта конечная точка не возвращает этот заголовок, поэтому префикс не работает, и браузер останавливается прямо там.

Обычно при отправке с внешнего интерфейса JavaScript на конечную точку API, ожидающей JSON, добавление заголовка Content-Type: application/json в запрос именно то, что вам нужно делать и что нужно делать. Но не в этом случае, потому что эта конкретная конечная точка API не обрабатывает ее должным образом.

Ответ 2

Я использую axios и была похожая проблема. Что мне помогло, так это установив заголовок Content-Type в application/x-www-form-urlencoded. нашел его в этой теме: https://github.com/axios/axios/issues/475 Похоже, что это запускает "простой запрос" и, следовательно, избегает запуска предварительной проверки CORS. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

НТН.