Memperbaiki kesalahan CORS di node.js dan sudut – Beragampengetahuan

Bayangkan menggunakan front-end sudut baru menggunakan back-end Node.js/Express API, hanya untuk menemukan bahwa sekali waktu nyata, panggilan API tidak akan berfungsi dengan baik. Tim kami menghadapi situasi ini – aplikasi sebenarnya rusak karena kurangnya header respons HTTP. Semuanya baik -baik saja secara lokal, tetapi dalam produksi, konsol browser menunjukkan kesalahan CORS karena respons API kami kurang Kontrol Akses – Asal yang Diizinkan judul. Header “sederhana” membuat perbedaan antara aplikasi yang berfungsi penuh dan ujung depan yang tampaknya retak. Dalam artikel ini, kami akan mengeksplorasi bagaimana kebijakan CORS yang salah konfigurasi merusak aplikasi sudut dan cara mendiagnosis dan memperbaikinya di sisi server (dengan contoh simpul/ekspres).

Bagaimana masalah CORS muncul dalam aplikasi sudut

Aplikasi sudut Meminta data dari API http://localhost:3000. Respons server tanpa keharusan Kontrol Akses – Asal yang Diizinkan Judul, jadi kebijakan CORS browser mencegah aplikasi sudut dari melihat tanggapan.

Dalam aplikasi sudut, salah konfigurasi CORS biasanya ditampilkan sebagai kesalahan dalam konsol browser, dan permintaan HTTP tidak bisa mendapatkan data. Jika CORS “jabat tangan” gagal, browser menolak untuk mengizinkan akses front-end ke respons API. Misalnya, konsol mungkin mengeluh Kontrol Akses – Asal yang Diizinkan Header hilang dalam respons API. Di panel jaringan DevTools, Anda dapat melihat permintaan dan tanggapan, tetapi mereka akan ditandai sebagai Mencegah Oleh CORS. Untuk pengguna akhir, aplikasi ini hanya rusak atau dimuat.

Mendiagnosis kegagalan CORS dalam tumpukan sudut/simpul

Beberapa petunjuk dapat mengkonfirmasi masalah CORS ketika sesuatu tidak berhasil:

1. Periksa Konsol Peramban dan Tab Jaringan: Kesalahan CORS akan ditampilkan di konsol (mis. Mengeluh tentang hilang Kontrol Akses – Asal yang Diizinkan judul). Tab jaringan juga akan menunjukkan respons server tidak ada header CORS yang cocok untuk asal aplikasi Anda.
2. Coba minta di luar browser: Hubungi API secara langsung menggunakan Postman atau Curl (pelanggan tersebut tidak menegakkan COR). Jika permintaan berfungsi di sini (Anda akan mengambil data), tetapi aplikasi sudut Anda masih diblokir, konfirmasi bahwa masalah tersebut terkait dengan CORS (server mengembalikan data, tetapi browser menghentikannya).
3. Mengidentifikasi dan memperbaiki pengawasan sisi server: Cari tahu kesalahan apa yang dilakukan server. Mungkin tidak ada header CORS yang dikirim sama sekali, atau sumber kesalahan diizinkan, atau tidak menangani beberapa metode HTTP atau pra-penerbangan Opsi Memerlukan. Kesalahpahaman semacam itu akan menyebabkan browser memblokir permintaan.

Malconfigured CORS: Contoh kode (tidak ada apa -apa)

Asumsikan bahwa ujung depan sudut kami adalah API kami adalah http://localhost:3000. Ini adalah server ekspres minimum tanpa konfigurasi CORS:

// server.js (Node/Express backend)
const express = require('express');
const app = express();

// A simple API endpoint
app.get('/api/data', (req, res) => {
  res.json({ message: "Hello from API" });  // No CORS headers set
});

app.listen(3000, () => console.log('API running on port 3000'));

Server akan Dengan json. Tapi jika aplikasi sudut localhost:4200) Sebut API ini dan browser akan memblokir respons karena tidak ada Kontrol Akses – Asal yang Diizinkan Kirim header. Di konsol browser Anda akan melihat kesalahan tentang header yang hilang dan permintaan HTTP sudut akan gagal.

Kesalahan umum lainnya adalah mengatur asal kesalahan. Misalnya, jika server memungkinkan Tapi aplikasi Anda sebenarnya disediakan darinya https://www.myapp.example.combrowser masih akan memblokir respons karena asal tidak tepat. COR membutuhkan pertandingan asal yang tepat (atau wildcard). Jadi kesalahan ketik kecil di asal mungkin sama buruknya dengan tidak memungkinkan COR sama sekali.

Perbaiki CORS: Konfigurasi sisi server yang benar (Express.js)

Setelah mengidentifikasi masalah CORS, memperbaikinya berarti memperbarui konfigurasi server untuk secara eksplisit memungkinkan asal yang diperlukan. Di server Express (Node.js), Anda dapat menggunakan middleware atau secara manual menambahkan header.

Menggunakan Middleware CORS: Cara termudah adalah menggunakan cors mengemas. Instal, dan sertakan di aplikasi Anda, menentukan sumber yang ingin Anda izinkan. Misalnya:

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

const corsOptions = {
  origin: '',  // allow dev origin
  // (add methods, credentials etc. if needed)
};
app.use(cors(corsOptions));

// ... define routes ...
app.get('/api/data', (req, res) => {
  res.json({ message: "Hello from API" });
});

Dalam ringkasan di atas, kami mengkonfigurasi server untuk menerima . Ini berarti server akan menyertakan Access-Control-Allow-Origin: Menanggapi sumber ini. Anda dapat mendaftar beberapa sumber asli yang diizinkan atau secara dinamis memeriksa asal menggunakan fungsi. Setelah perubahan, panggilan HTTP aplikasi Angular kami akan berhasil – browser melihat judul yang sesuai dan memungkinkan respons berlalu.

Anda Bisa panggilan app.use(cors()) Tidak ada pilihan yang memungkinkan semua asal, tetapi hati -hati. Mengizinkan sumber apa pun untuk membuka API untuk umum tidak apa -apa, tetapi untuk API yang memerlukan otentikasi atau hanya berlaku untuk pengguna aplikasi. Juga, jika Anda perlu mengizinkan kredensial (cookie, auth token), harus Tentukan sumber eksplisit – browser akan memblokir memiliki Access-Control-Allow-Credentials: true Tapi wildcard * asal. Singkatnya, cukup mengunci CORS ke asal yang Anda butuhkan, terutama jika kredensial terlibat.

Tetapkan judul secara manual: Anda juga dapat mengaktifkan COR dengan secara manual mengirimkan judul yang sesuai dalam Kode Kurir. Misalnya:

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});

Fitur middleware ini menambahkan judul CORS dan menangani pra-penerbangan Opsi Permintaan (segera tanggapi dengan HTTP 204). Namun, melakukannya dengan tangan dapat menyebabkan kesalahan (Anda mungkin melupakan judulnya atau mengizinkan sesuatu yang tidak Anda rencanakan). Kecuali Anda memiliki persyaratan khusus, menggunakan middleware resmi rentan terhadap kesalahan.

Praktik terbaik untuk mencegah masalah CORS dalam aplikasi sudut

• Host front-end dan back-end berada di sumber yang sama jika memungkinkan: Berikan aplikasi sudut dan API dari domain yang sama (dan port) sepenuhnya menghindari COR. Menyebarkan mereka bersama -sama (misalnya, dengan proksi terbalik atau sebagai subpath pada host yang sama).
• Hanya mengaktifkan COR yang membutuhkan asalnya: Konfigurasikan server untuk dikirim Access-Control-Allow-Origin Untuk sumber spesifik aplikasi Anda. Misalnya, izinkan Dalam pengembangan dan area produksi Anda (mis. https://myapp.com)Produksi. Jangan gunakan * (Semua asal) kecuali API Anda benar -benar publik dan tidak memiliki data sensitif.
• Hindari wildcard jika kredensial terlibat: Jika front-end perlu mengirim cookie atau token otentikasi, server harus diatur Access-Control-Allow-Credentials: true dan menentukan sumber yang diizinkan secara eksplisit (bukan *). Browser akan menolak respons kredensial menggunakan wildcard.
• Sertakan semua judul CORS yang diperlukan: Pastikan untuk mengirim header CORS lain sesuai kebutuhan. Misalnya, atur Metode Kontrol Akses (mencakup semua metode HTTP yang didukung oleh API) dan Pengontrol akses memungkinkan header (Memungkinkan header khusus atau non-standar yang dapat dikirim pelanggan, mis. Content-Type atau X-XSRF-TOKEN). Jika judul-judul ini hilang, pemeriksaan pra-penerbangan browser mungkin gagal. (Sebagian besar perpustakaan CORS menangani ini untuk Anda.)
• Uji COR di setiap lingkungan: Jangan menunggu produksi menemukan masalah CORS. Uji aplikasi Anda dalam lingkungan cek fase/kualitas di mana front-end dan back-end mungkin memiliki domain yang berbeda. Gunakan alat pengembangan browser untuk memverifikasi bahwa header CORS yang benar ada. (Jika Anda menggunakan proxy selama pengembangan lokal untuk menghindari COR, ingat bahwa dalam produksi, server yang sebenarnya harus menanganinya.)

sebagai kesimpulan

Kesalahan konfigurasi kecil dengan CORS dapat memiliki dampak besar – ujung depan sudut Anda mungkin tidak dapat digunakan karena kurangnya header respons. Berita baiknya adalah bahwa perbaikannya sederhana: dengan menambahkan header CORS yang sesuai ke server (atau menggunakan middleware standar), Anda dapat memastikan bahwa komunikasi front-end dan back-end berjalan lancar.