Memahami CORS: Perkongsian Sumber Silang Asal Selamat dalam JavaScript

CORS (Perkongsian Sumber Silang Asal)

CORS (Cross-Origin Resource Sharing) ialah ciri keselamatan yang dilaksanakan oleh penyemak imbas web untuk mengawal cara sumber boleh diminta daripada domain (asal) yang berbeza daripada domain yang sumber itu berasal. Ia adalah penting dalam pembangunan web moden, terutamanya apabila bekerja dengan API, kerana ia menghalang akses tanpa kebenaran kepada sumber dan memastikan pertukaran data yang selamat.

---

1. Apakah itu Asal?

asal usul ditakrifkan oleh gabungan:

• Protokol: (cth., http, https)
• Domain: (cth., example.com)
• Port: (cth., :80, :443)

Contoh:

• https://example.com dan http://example.com adalah asal yang berbeza.
• https://example.com:3000 dan https://example.com:4000 juga merupakan asal yang berbeza.

---

2. Polisi Asal Sama (SOP)

Dasar Asal Sama ialah langkah keselamatan yang menyekat cara sumber pada halaman web boleh berinteraksi dengan sumber dari asal lain.

• Contoh: Skrip yang dimuatkan daripada https://example.com tidak boleh mengambil data daripada https://api.otherdomain.com tanpa kebenaran yang jelas.

Walaupun SOP memastikan keselamatan, ia mengehadkan permintaan silang asal yang sah, iaitu tempat CORS masuk.

---

3. Apakah itu CORS?

CORS ialah mekanisme yang membolehkan pelayan menentukan siapa yang boleh mengakses sumber mereka dengan memasukkan pengepala HTTP tertentu dalam respons mereka. Pengepala ini menunjukkan sama ada penyemak imbas harus membenarkan klien mengakses sumber yang diminta.

---

4. Bagaimana CORS Berfungsi

Apabila penyemak imbas membuat permintaan silang asal, ia menyemak pengepala respons pelayan untuk menentukan sama ada permintaan itu dibenarkan.

Langkah Utama:

1. Permintaan Pra Penerbangan (Pilihan):
   
   Untuk jenis permintaan tertentu, penyemak imbas menghantar permintaan OPTIONS awal untuk menyemak sama ada permintaan sebenar dibenarkan.

2. Respons Pelayan:
   
   Pelayan menyertakan pengepala CORS yang sesuai dalam respons.

3. Keputusan Pelayar:
   
   Jika pengepala sepadan dengan jangkaan penyemak imbas, sumber akan dikongsi; jika tidak, penyemak imbas menyekat permintaan itu.

---

5. Tajuk CORS Penting

Tajuk Permintaan:

• Asal: Menentukan asal permintaan. Contoh: Asal: https://example.com

Tajuk Balas:

• Access-Control-Allow-Origin: Menentukan asal yang dibenarkan untuk mengakses sumber.
  
  Contoh: Access-Control-Allow-Origin: https://example.com

• Access-Control-Allow-Methods: Menentukan kaedah HTTP yang dibenarkan.
  
  Contoh: Access-Control-Allow-Methods: GET, POST, PUT

• Access-Control-Allow-Headers: Menentukan pengepala tersuai yang boleh dihantar dalam permintaan.
  
  Contoh: Access-Control-Allow-Headers: Content-Type, Authorization

• Access-Control-Allow-Credentials: Menunjukkan sama ada bukti kelayakan (kuki, pengesahan HTTP) boleh dihantar.
  
  Contoh: Access-Control-Allow-Credentials: benar

---

6. Jenis Permintaan CORS

1. Permintaan Mudah:

   • Ini adalah permintaan mudah (cth., GET, POST) tanpa pengepala tersuai dan tiada preflight.

2. Permintaan Ditetapkan:

   • Untuk permintaan dengan pengepala tersuai, bukti kelayakan atau kaedah selain GET atau POST, penyemak imbas menghantar permintaan OPTIONS prapenerbangan untuk memastikan pelayan membenarkannya.

3. Permintaan Diwibawa:

   • Permintaan yang menyertakan bukti kelayakan seperti kuki memerlukan pengepala Access-Control-Allow-Credentials.

---

7. Contoh: CORS dalam Tindakan

JavaScript Bahagian Pelanggan:

fetch("https://api.otherdomain.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
  credentials: "include", // For sending cookies or credentials
})
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

Tajuk Respons Pelayan:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

---

8. Mengendalikan CORS dalam Kod Bahagian Pelayan

Contoh Node.js dengan Ekspres:

const express = require("express");
const cors = require("cors");
const app = express();

// Use the CORS middleware
app.use(cors({
  origin: "https://example.com", // Allow only this origin
  methods: ["GET", "POST"], // Allow these HTTP methods
  credentials: true, // Allow credentials
}));

app.get("/data", (req, res) => {
  res.json({ message: "CORS request successful" });
});

app.listen(3000, () => console.log("Server running on port 3000"));

---

9. Isu dan Pembetulan CORS Biasa

1. Ralat: Tiada pengepala 'Access-Control-Allow-Origin' pada sumber yang diminta.

   • Betulkan: Pastikan pelayan menyertakan pengepala Access-Control-Allow-Origin.

2. Ralat: Permintaan yang disahkan memerlukan 'Kawalan-Kawalan-Benarkan-Kelayakan' adalah benar.

   • Betulkan: Tetapkan Access-Control-Allow-Credentials kepada benar dan pastikan Access-Control-Allow-Origin bukan *.

3. Permintaan Pra Penerbangan Gagal:

   • Betulkan: Pastikan pelayan bertindak balas dengan betul kepada permintaan OPTIONS dengan pengepala CORS yang diperlukan.

---

10. Kelebihan CORS

• Meningkatkan keselamatan dengan membenarkan perkongsian sumber terkawal.
• Memudahkan integrasi API antara domain yang berbeza.
• Menyokong pelbagai konfigurasi untuk memenuhi keperluan aplikasi.

---

11. Had CORS

• Kerumitan konfigurasi untuk API yang memerlukan asal dinamik.
• Peningkatan overhed untuk permintaan prapenerbangan pada API tertentu.
• Ralat selalunya mencabar untuk nyahpepijat disebabkan oleh penguatkuasaan penyemak imbas.

---

12. Kesimpulan

CORS ialah ciri penting untuk perkongsian sumber merentas asal yang selamat dan berfungsi dalam aplikasi web. Dengan memahami dan mengkonfigurasi pengepala CORS dengan betul pada pelayan anda, anda boleh memastikan komunikasi lancar dan selamat antara domain sambil mematuhi piawaian keselamatan web.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Memahami CORS: Perkongsian Sumber Silang Asal Selamat dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!