Pandangan yang mendalam di CORS

Artikel ini, peer-reviewed oleh Panayiotis "PVGR" Velisarakos (dengan terima kasih kepada semua pengulas Peer SitePoint!), Meneroka Perkongsian Sumber Sumber Cross-Origin (CORS), API HTML5 yang membolehkan laman web untuk mengakses sumber luaran yang terhad sebelumnya. CORS melonggarkan dasar asal yang sama, yang membolehkan permintaan ke domain yang berbeza. Sebagai contoh, sebelum CORS, permintaan Ajax silang domain adalah mustahil. Artikel ini menunjukkan bagaimana CORS meningkatkan pengalaman web.

Takeaways utama:

1. CORS disokong oleh pelayar yang paling moden.
2. header Access-Control-Allow-Origin menentukan asal -usul yang boleh mengakses respons pelayan.
3. header mengendalikan akses cookie. Access-Control-Allow-Credentials
permintaan mudah (mendapatkan, kepala, pos) tidak mencetuskan preflights; permintaan yang lebih kompleks lakukan.
The
5. attribute (with crossorigin or anonymous values) controls credential handling for <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173984767246953.jpg" class="lazy" alt=" pandangan mendalam di kors "> <code>use-credentials <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173984767246953.jpg" class="lazy" alt="An In-depth Look at CORS "> <p><strong>Preflights:</strong></p> <p>For complex requests (methods beyond GET/HEAD/POST, or custom headers), preflights (an initial OPTIONS request) verify server acceptance. The server responds with <code>Access-Control-Allow-Origin Access-Control-Allow-Credentials Preflights: Access-Control-Allow-Methods Access-Control-Allow-Headers Access-Control-Max-Age Untuk permintaan kompleks (kaedah di luar mendapatkan/kepala/pos, atau tajuk tersuai), preflights (permintaan pilihan awal) Sahkan penerimaan pelayan. Pelayan bertindak balas dengan Access-Control-Request-Method, Access-Control-Request-Headers,
   ,

   , dan header. Pelanggan menghantar

   dan

   dalam preflight.

   Access-Control-Allow-Origin Cors and Canvas Images: img.setAttribute('crossOrigin', 'anonymous');

   Untuk menggunakan imej luaran dalam kanvas, pelayan mesti mengaktifkan CORS (mis., Dengan menetapkan dalam konfigurasi pelayan). Kod sisi klien memerlukan

   . Tanpa CORS, pengecualian keselamatan berlaku.

   crossorigin

   atribut

   : crossorigin Origin anonymous Apabila mengambil sumber luaran (imej, stylesheets, skrip) menggunakan tag HTML, atribut use-credentials mencetuskan permintaan CORS dengan header Access-Control-Allow-Credentials: true.

   menghilangkan kelayakan;

   termasuk mereka (memerlukan pelayan sisi ).

   Kesimpulan:

   CORS dengan ketara meningkatkan pembangunan web dengan memudahkan akses sumber silang asal. Sangat penting untuk memahami implikasi keselamatannya dan melaksanakannya dengan betul.

   Soalan Lazim (Soalan Lazim):

   Seksyen Soalan Lazim memberikan jawapan terperinci kepada soalan-soalan umum mengenai CORS, yang meliputi tujuan pengepala, pengendalian kuki, permintaan yang mudah dan mudah, konfigurasi sisi pelayan, risiko keselamatan, keserasian permintaan HTTP, peranan tajuk tertentu, tingkah laku penyemak imbas , ujian, dan perbezaan antara CORS dan JSONP. (Bahagian FAQ asal dikekalkan secara keseluruhannya.)

Atas ialah kandungan terperinci Pandangan yang mendalam di CORS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!