Ошибка политики CORS при подключении к chat.postMessage в slack API с установленными заголовками и не заданными в React и Redux

Я пытался отправить сообщение в slack API, используя React и axios, и по неизвестным причинам я получаю ошибку политики CORS.

export const sendMessage = data => dispatch => {
    console.log(data);
    const message = {
        channel: data.currentChannelId,
        text: data.text
    };
    const token =
        "MY_TOKEN";

    const config = {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`
    };
    axios
        .post("https://slack.com/api/chat.postMessage", JSON.stringify(message), config)
        .then(res => {
            console.log(res);
            dispatch({
                type: actionTypes.SEND_MESSAGE,
                payload: data
            });
        })
        .catch(err =>
            dispatch({
                type: actionTypes.SEND_MESSAGE,
                payload: {}
            })
        );
};

Я проверил множество вопросов, заданных здесь, а также связался со службой поддержки slack и получил следующее сообщение:

Мы видели, как разработчики добивались лучших результатов, убедившись, что они не отправляют заголовки вместе со своим запросом? Это может привести к ошибкам предварительной проверки с нашей стороны.

Не могли бы вы попробовать и посмотреть, поможет ли это?

Конечно, не отправлять заголовки невозможно, так как мы также отправляем Authorization в наших заголовках.

Я попытался удалить только "Content-Type": "application/json", и снова произошла та же ошибка. Также я попытался изменить его на "Content-Type": "application/x-www-form-urlencoded"

Никаких изменений не происходит ни в том, ни в другом случае. Я получаю эту ошибку:

Доступ к XMLHttpRequest по адресу 'https://slack.com/api/chat.postMessage' из origin 'http://localhost:3000' заблокирован политикой CORS: тип содержимого поля заголовка запроса не разрешен с помощью Access-Control-Allow-Headers в предварительном ответе.

Хотя есть много других вопросов, и это может быть дубликат, но ни один из ответов не подходит для моей проблемы.


person Afshin    schedule 14.06.2019    source источник
comment
@sideshowbarker дорогой друг, я прочитал твой ответ на вопрос. Но это не решило мою проблему. Как видите, я упомянул в своем тексте, что пытался удалить тип контента, и ничего не помогло. Вы могли бы хотя бы прочитать мой текст, а затем пометить это как дубликат.   -  person Afshin    schedule 14.06.2019
comment
На самом деле вы не удалили заголовок запроса Content-Type. Если бы вы это сделали, вы бы по-прежнему не получали сообщение о том, что "тип содержимого поля заголовка запроса не разрешен Access-Control-Allow-Headers в предварительном ответе"   -  person sideshowbarker    schedule 14.06.2019
comment
Что вы подразумеваете под успешным удалением? я сделал это на самом деле   -  person Afshin    schedule 14.06.2019
comment
Я получил ту же ошибку и решил ее, просто добавив эти заголовки на стороне сервера API Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST,GET,PUT,DELETE Access-Control-Allow-Headers: Authorization   -  person himanshu    schedule 14.06.2019
comment
@himanshu Я пробую это на локальном хосте и добавляю Access-Control-Allow-Origin: * это в заголовок, отправленный axios. Вы имеете в виду это?   -  person Afshin    schedule 14.06.2019
comment
@sideshowbarker, не могли бы вы помочь мне с кодом? Мне очень нужно :-(   -  person Afshin    schedule 14.06.2019


Ответы (1)


Удалите заголовок Content-Type из вашего запроса. Конечные точки API Slack не отправляют ответ с Access-Control-Allow-Headers, поэтому предварительная проверка не выполняется.

person Mezbaul Haque    schedule 14.06.2019
comment
Как я уже упоминал в своем вопросе, я сделал это. Пожалуйста, перепроверьте мой вопрос! - person Afshin; 14.06.2019