Kesalahan kebijakan CORS saat menyambung ke chat.postMessage di slack api dengan header disetel dan tidak disetel di React dan Redux [duplikat]

Saya mencoba mengirim pesan ke slack api menggunakan React dan axios, dan karena beberapa alasan yang tidak diketahui saya mendapatkan kesalahan kebijakan 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: {}
            })
        );
};

Saya telah memeriksa banyak pertanyaan yang diajukan di sini, dan juga menghubungi dukungan slack, dan mendapat pesan berikut:

Kami telah melihat pengembang mendapatkan hasil yang lebih baik dengan memastikan mereka tidak mengirimkan header apa pun bersamaan dengan permintaan mereka? Hal ini dapat menyebabkan kesalahan pra-penerbangan di pihak kami.

Bisakah Anda mencoba dan melihat apakah itu membantu?

Tentu saja, tidak mungkin mengirimkan header apa pun karena kami juga mengirimkan Otorisasi di header kami.

Saya mencoba menghapus "Content-Type": "application/json" saja, dan sekali lagi kesalahan yang sama terjadi. Saya juga mencoba mengubahnya menjadi "Content-Type": "application/x-www-form-urlencoded"

Tidak ada perubahan yang terjadi pada kedua kasus tersebut. Saya mendapatkan kesalahan ini:

Akses ke XMLHttpRequest di 'https://slack.com/api/chat.postMessage' dari origin 'http://localhost:3000' telah diblokir oleh kebijakan CORS: Jenis konten bidang header permintaan tidak diperbolehkan oleh Access-Control-Allow-Headers dalam respons preflight.

Meskipun ada banyak pertanyaan lain, dan ini mungkin duplikat, namun tidak ada jawaban yang sesuai dengan masalah saya.


person Afshin    schedule 14.06.2019    source sumber
comment
@sideshowbarker sahabat, saya telah membaca jawaban Anda atas pertanyaan itu. Tapi, itu tidak menyelesaikan masalahku. Seperti yang Anda lihat, saya telah menyebutkan dalam teks saya bahwa saya telah mencoba menghapus tipe konten, dan tidak ada yang membantu. Setidaknya Anda bisa membaca teks saya, lalu menandainya sebagai duplikat.   -  person Afshin    schedule 14.06.2019
comment
Sebenarnya, Anda tidak berhasil menghapus header permintaan Content-Type. Jika sudah, Anda tidak akan tetap menerima pesan yang menyatakan, “Jenis konten kolom header permintaan tidak diizinkan oleh Access-Control-Allow-Headers dalam respons preflight”   -  person sideshowbarker    schedule 14.06.2019
comment
Apa yang dimaksud dengan berhasil menghapusnya? Sebenarnya aku melakukannya   -  person Afshin    schedule 14.06.2019
comment
Saya mendapat kesalahan yang sama dan diselesaikan hanya dengan menambahkan header ini di sisi server 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 Saya mencoba ini di localhost, dan menambahkan Access-Control-Allow-Origin: * ini ke header yang dikirim oleh axios. Maksudmu ini?   -  person Afshin    schedule 14.06.2019
comment
@sideshowbarker maukah Anda membantu saya dengan kodenya? aku sangat membutuhkannya :-(   -  person Afshin    schedule 14.06.2019


Jawaban (1)


Hapus header Content-Type dari permintaan Anda. Titik akhir API Slack tidak mengirimkan respons dengan Access-Control-Allow-Headers sehingga preflight gagal.

person Mezbaul Haque    schedule 14.06.2019
comment
Seperti yang saya sebutkan dalam pertanyaan saya, saya melakukannya. Silakan periksa kembali pertanyaan saya! - person Afshin; 14.06.2019