• Apa itu CORS?
• Langkah 1 - Installasi Library CORS
• Langkah 2 - Konfigurasi CORS
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya, kita telah belajar bagaimana cara membuat RESTful API CRUD di Express menggunakan MongoDB. Pada kesempatan kali ini, kita akan menambahkan middleware CORS (Cross-Origin Resource Sharing) untuk RESTful API yang sudah kita buat sebelumnya.

Apa itu CORS?

CORS adalah mekanisme yang memungkinkan sumber daya di satu origin (domain) diakses oleh sumber daya dari origin yang berbeda. Misalnya, jika aplikasi frontend kita di-host di http://localhost:5173, dan API kita di-host di http://localhost:3000, maka kita perlu mengizinkan permintaan dari frontend ke backend kita menggunakan CORS.

Langkah 1 - Installasi Library CORS

Sekarang kita akan menggunakan library tambahan untuk menangani proses CORS di dalam project Express. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Express.

npm install cors@2.8.5 --save

Langkah 2 - Konfigurasi CORS

Setelah berhasil melakukan installasi library, sekarang kita lanjutkan untuk konfigurasi di dalam project Express. Silahkan buka file index.js, kemudian ubah kode-nya menjadi seperti berikut ini :

//import express
const express = require('express')

//import CORS
const cors = require('cors')

//import bodyParser
const bodyParser = require('body-parser')

//import router
const router = require('./routes')

//init app
const app = express()

//use cors
app.use(cors())

//use body parser
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

//define port
const port = 3000;

//route
app.get('/', (req, res) => {
  res.send('Hello World!')
})

//define routes
app.use('/api', router);

//start server
app.listen(port, () => {
    console.log(`Server started on port ${port}`);
})

Dari penambahan kode di atas, pertama kita import library CORS.

//import library CORS
const cors = require('cors')

Kemudian kita apply ke dalam project Express menggunakan keyword use.

//use cors
app.use(cors())

Kurang lebih seperti itu, silahkan teman-teman bisa mencoba menggunakan RETful API di aplikasi lain, misalnya seperti Android, Vue, React, Svelte dan yang lainnya.

Kesimpulan

Pada artikel ini, kita telah belajar bagaimana cara menambahkan middleware CORS di project Express.

Jika teman-teman ada kendala saat belajar, silahkan bisa bertanya melalui kolom komentar atau group Telegram SantriKoding.

Terima Kasih