Menerima "TypeError: Unable to get" apabila permintaan itu sebenarnya tidak gagal

Question

Saya menggunakan API pengambilan dalam aplikasi React saya. Aplikasi ini digunakan pada pelayan dan berjalan dengan baik. Saya mengujinya beberapa kali. Walau bagaimanapun, aplikasi itu tiba-tiba berhenti berfungsi dan saya tidak tahu mengapa. Masalahnya ialah apabila saya menghantar permintaan get, saya menerima respons yang sah daripada pelayan, tetapi API fetch juga menangkap pengecualian dan menunjukkan TypeError: Gagal untuk mengambil ; Saya tidak membuat sebarang perubahan pada kod dan ini adalah masalah dengan semua komponen React.

Saya menerima balasan yang sah:

Tetapi saya juga mendapat ralat ini:

fetch(url)
.then(res => res.json())
.then(data => {
  // lakukan sesuatu dengan data
})
.catch(ditolak => {
    console.log(ditolak);
});

Apabila saya mengalih keluar bukti kelayakan: "include" ia berfungsi pada localhost tetapi tidak pada pelayan.

Saya mencuba semua penyelesaian yang diberikan pada StackOverflow dan GitHub tetapi ia tidak berkesan untuk saya.

Answer 1

Saya tahu mungkin terdapat sebab khusus React untuk masalah ini, tetapi ia muncul dahulu dalam hasil carian untuk "Typeerror: Failed to fetch" dan saya ingin menyenaraikan semua kemungkinan sebab di sini.

Spesifikasi Fetch disenaraikan apabila TypeError dinaikkan daripada Fetch API: https://fetch.spec.whatwg.org/#fetch-api

Perenggan yang berkaitan setakat Januari 2021 adalah di bawah. Ini adalah petikan daripada teks.

4.6 pemerolehan rangkaian HTTP

Mengisi pengepala objek pengepala menggunakan objek objek yang diberikan:

Langkah kaedah kadangkala ralat jenis lontaran:

Dalam bahagian "Body mixin", terdapat pelbagai cara untuk menimbulkan TypeError jika anda menggunakan FormData. Saya tidak menyenaraikannya di sini kerana ia akan menjadikan jawapan ini sangat panjang. Petikan yang berkaitan: https://fetch.spec.whatwg.org/#body-mixin

Dalam bahagian "Kelas Permintaan", pembina Permintaan(input, init) baharu ialah medan ranjau yang berpotensi ralat jenis:

Dalam kelas Respons:

Di bahagian "Mendapatkan Kaedah"

Selain daripada isu yang berpotensi ini, terdapat beberapa gelagat khusus penyemak imbas yang mungkin menimbulkan TypeError. Contohnya, jika anda menetapkan keepalive kepada benar dan muatan ialah > 64 KB, anda akan mendapat TypeError pada Chrome, tetapi permintaan yang sama akan berfungsi dalam Firefox. Gelagat ini tidak didokumenkan dalam spesifikasi, tetapi anda boleh mencari maklumat tentangnya dengan carian Google untuk memahami had setiap pilihan yang anda tetapkan dalam pengambilan.

Answer 2

Ini mungkin masalah dengan respons yang anda terima daripada bahagian belakang. Jika ia berfungsi dengan baik pada pelayan, maka masalahnya mungkin dalam pengepala respons.

Apabila menyemak pengepala respons Access-Control-Allow-Origin 的值。通常，当响应标头的 Access-Control-Allow-Origin tidak sepadan dengan sumber permintaan, API pengambilan akan menimbulkan ralat tidak boleh diambil walaupun respons diterima.