Mengendalikan Isu CORS: Panduan Lengkap

Cross-Origin Resource Sharing (CORS) ialah mekanisme yang membolehkan aplikasi web meminta sumber daripada domain yang berbeza daripada yang menyediakan halaman web. Walaupun ini adalah ciri penting untuk aplikasi web moden, ia juga boleh memperkenalkan komplikasi, terutamanya apabila permintaan disekat kerana dasar keselamatan. Panduan ini akan merangkumi apa itu CORS, sebab ia penting, isu biasa dan amalan terbaik untuk mengendalikan CORS dalam pembangunan frontend.

Apakah itu CORS?

CORS ialah ciri keselamatan yang dilaksanakan oleh penyemak imbas untuk menghalang tapak web berniat jahat daripada mengakses sumber pada domain lain tanpa kebenaran. Ia menggunakan pengepala HTTP untuk menentukan sama ada permintaan daripada satu asal (domain) dibenarkan untuk mengakses sumber pada asal lain.
Pada asasnya, satu domain tidak boleh mengakses data daripada domain lain untuk menghalang apl dan semua daripada program berniat jahat, virus dan semua. Dalam kes ini, pelayan harus mengetahui butiran domain yang dibenarkan yang dikonfigurasikan menggunakan CORS.

Tajuk CORS Utama

1. Access-Control-Allow-Origin: Menentukan asal yang boleh mengakses sumber.
   

2. Access-Control-Allow-Methods: Tentukan kaedah HTTP (GET, POST, dll.) yang dibenarkan.
   

3. Access-Control-Allow-Headers: Menentukan pengepala HTTP yang boleh digunakan semasa permintaan sebenar.
   

4. Access-Control-Allow-Credentials: Menunjukkan sama ada respons kepada permintaan boleh didedahkan atau tidak apabila bendera bukti kelayakan adalah benar.
   

5. Access-Control-Expose-Header: Menentukan pengepala yang boleh didedahkan sebagai sebahagian daripada respons.
   

6. Access-Control-Max-Age: Menunjukkan berapa lama hasil permintaan prapenerbangan boleh dicache.
   

Mengapa CORS Penting

CORS adalah penting untuk keselamatan, menghalang akses tanpa kebenaran kepada maklumat sensitif. Walau bagaimanapun, dasar CORS yang ketat juga boleh menghalang permintaan API yang sah, menyebabkan masalah kefungsian dalam aplikasi web anda. Memahami dan mengkonfigurasi CORS dengan betul adalah penting untuk memastikan keselamatan dan kefungsian.

Isu CORS Biasa

1. Disekat oleh dasar CORS: Ini berlaku apabila pelayan tidak menyertakan pengepala CORS yang sesuai.
   

2. Kegagalan Permintaan Prapenerbangan: Apabila permintaan prapenerbangan (PILIHAN) dibuat dan pelayan tidak bertindak balas dengan betul.
   

3. Permintaan Diwibawa: Apabila kuki atau pengepala pengesahan disertakan, pelayan mesti membenarkan bukti kelayakan secara eksplisit.
   

Amalan Terbaik untuk Mengendalikan CORS

Dalam artikel ini, kami akan menggunakan perpustakaan cors npm yang boleh dihantar dengan mudah sebagai perisian tengah ekspres dan boleh digunakan dengan React juga
Pertama sekali, pasang cors dengan menjalankan arahan

npm pasang cors

1. Tatarajah Bahagian Pelayan

Cara paling berkesan untuk menangani isu CORS ialah dengan mengkonfigurasi pelayan untuk membenarkan permintaan silang asal. Cara paling optimum ialah mengkonfigurasi CORS di bahagian pelayan supaya Frontend (React.js) boleh bercakap dengan lancar ke bahagian belakang. Ini melibatkan penetapan beberapa sifat

Contoh: Node.js dengan Express

const express = require('express'); const cors = require('cors'); const app = express(); const corsOptions = { origin: 'http://example.com', // specify the allowed origin methods: 'GET,POST,PUT,DELETE', // allowed methods allowedHeaders: 'Content-Type,Authorization', // allowed headers credentials: true, // allow credentials }; app.use(cors(corsOptions)); app.get('/api/data', (req, res) => { res.json({ message: 'This is CORS-enabled for only example.com.' }); }); app.listen(3000, () => { console.log('Server running on port 3000'); });

Anda boleh menggunakan * untuk kaedah, allowedHeader untuk membenarkan setiap kaedah atau header

Harta Asal:

// specify the allowed origin (single domain), origin: 'http://example.com', // configure cors to set the origin to the request origin origin:true // set multiple domains origin:["http://example.com","https://demo.com"]

1. Mengendalikan CORS di Frontend

Jika anda tidak mengawal pelayan atau memerlukan penyelesaian pantas semasa pembangunan, anda boleh menangani isu CORS di bahagian hadapan.

Contoh: Menggunakan Proksi dalam React

Apabila menggunakan React, anda boleh menyediakan proksi dalam package.json anda untuk mengubah hala permintaan API ke pelayan bahagian belakang, memintas isu CORS.

{ "name": "your-app", "version": "1.0.0", "proxy": "http://localhost:5000" }

Kesimpulan

Mengendalikan isu CORS adalah bahagian penting dalam pembangunan. Dengan memahami mekanisme CORS dan melaksanakan amalan terbaik yang digariskan dalam panduan ini, anda boleh memastikan bahawa aplikasi web anda kekal selamat sambil berfungsi dengan betul merentas domain yang berbeza. Sama ada anda mengkonfigurasi pelayan, menyediakan proksi atau menggunakan perkhidmatan pihak ketiga, strategi ini akan membantu anda mengurus CORS dengan berkesan.
Ingat, walaupun pembetulan pantas mungkin berguna untuk pembangunan dan ujian, konfigurasi sisi pelayan yang betul ialah cara paling boleh dipercayai untuk mengendalikan CORS dalam persekitaran pengeluaran.

Untuk maklumat lanjut dan mula menggunakan Dualite, lawati laman web rasmi kami

Atas ialah kandungan terperinci Mengendalikan Isu CORS: Panduan Lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!