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

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

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.

Что делать?

2 4
html content-type cors fetch-api

2 ответа:

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

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

'Content-type': 'application/json'

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

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

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

5

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

HTH.

0