Bagaimana untuk Menyelesaikan 'XMLHttpRequest tidak boleh memuatkan . Respons kepada permintaan prapenerbangan tidak lulus semakan kawalan akses' Ralat?

Kawalan Akses Ditolak: Menyelesaikan masalah CORS dalam Pembangunan Web

Isu:

Apabila menggunakan ngResource untuk mengakses API REST pada Perkhidmatan Web Amazon, anda menghadapi perkara berikut ralat:

XMLHttpRequest cannot load <url>. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<origin>' is therefore not allowed access.

Punca:

Isu ini berpunca daripada sekatan Perkongsian Sumber Silang (CORS), yang menghalang aplikasi web pada satu domain daripada membuat permintaan ke domain lain tanpa eksplisit kebenaran.

Penyelesaian:

Terdapat pelbagai pendekatan untuk menangani isu CORS:

1. Lumpuhkan CORS:

• Dalam Chrome, lawati chrome://flags/#disable-web-security
• Tetapkan "Lumpuhkan keselamatan web" kepada "Didayakan"
• Nota: Penyelesaian ini hanya boleh digunakan untuk pembangunan tujuan.

2. Pemalam Penyemak Imbas:

• Pasang pemalam penyemak imbas yang melumpuhkan semakan CORS, seperti CORS Nyahsekat.

3. Pelayan Proksi:

• Gunakan pelayan proksi, seperti Nginx, untuk mengendalikan permintaan silang asal. Ini menjadikan penyemak imbas percaya permintaan datang daripada hos setempat.

4. Konfigurasi Pelayan:

• Konfigurasikan pelayan anda untuk menambah pengepala Access-Control-Allow-Origin pada respons. Rujuk laman web Dayakan CORS untuk arahan khusus berdasarkan pelayan anda.

5. Contoh HTTP dengan Janji:

const makeRequest = (url, options) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open(options.method, url);
    request.setRequestHeader('Accept', 'application/json');

    request.onload = () => {
      if (request.status >= 200 && request.status < 300) {
        resolve(request.response);
      } else {
        reject({
          status: request.status,
          statusText: request.statusText
        });
      }
    };

    request.onerror = () => {
      reject({
        status: request.status,
        statusText: request.statusText
      });
    };

    request.send(options.body);
  });
};

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan 'XMLHttpRequest tidak boleh memuatkan . Respons kepada permintaan prapenerbangan tidak lulus semakan kawalan akses' Ralat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!