Mengapa Tetapan \'mod: \'no-cors\'\' Membuang SyntaxError Semasa Menggunakan fetch?

Ralat Semasa Mengakses API dengan Ambil Semasa Menetapkan Mod kepada 'no-cors'

Semasa percubaan untuk menyelesaikan janji pengambilan menggunakan JavaScript, menetapkan mod kepada 'tidak -cors' berdasarkan cadangan sebelumnya mengakibatkan ralat.

Apabila mod ditetapkan kepada 'cors,' ia menghasilkan ralat menyekat dasar CORS. Seperti yang dicadangkan, menukar mod kepada 'no-cors' dengan tujuan untuk melumpuhkan CORS dan mengambil sumber secara legap mengakibatkan ralat yang tidak dijangka:

Uncaught (in promise) SyntaxError: Unexpected end of input for return response.json()

Penjelasan

Punca perkara ini ralat terletak pada fungsi:

<code class="javascript">search() {
    return fetch(`${baselink}${summonerEndpoint}${summoner}${apikey}`, {mode: 'no-cors'}).then(response => {
      return response.json()
    }).then(jsonResponse => {
      console.log(jsonResponse);
      if (!jsonResponse.info) {
        return [];
      }
      return jsonResponse.info.items.map(info => ({
        id: info.id,
        accountId: info.accountId,
        name: info.name,
        profileIconId: info.profileIconId,
        revisionDate: info.revisionDate,
        summonerLevel: info.summonerLevel
      }));
    });
  }</code>

Menetapkan mod kepada 'no-cors' membayangkan bahawa penyemak imbas harus gagal secara senyap jika ia menghadapi sebarang isu berkaitan CORS. Dalam kes ini, pelayan tidak memberikan kebenaran menggunakan CORS dan permintaan itu gagal secara senyap.

Oleh itu, percubaan seterusnya untuk menghuraikan respons kosong sebagai JSON (menggunakan response.json()) melemparkan SyntaxError, seperti yang ada tiada data untuk dihuraikan.

Penyelesaian

Untuk menyelesaikan isu ini, terdapat dua keperluan utama:

1. Lumpuhkan Mod 'no-cors': Alih keluar 'mod: 'no-cors'' daripada permintaan pengambilan.
2. Dayakan CORS pada Pelayan: Pastikan pelayan bertindak balas dengan Access-Control-Allow yang sesuai -Pengepala asal untuk memberikan kebenaran kepada permintaan silang asal.

Dengan mengikuti langkah ini, aplikasi boleh mengambil data dengan jayanya tanpa mengalami sebarang ralat berkaitan CORS.

Atas ialah kandungan terperinci Mengapa Tetapan \'mod: \'no-cors\'\' Membuang SyntaxError Semasa Menggunakan fetch?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!