ByPass Cors Origin Menggunakan NodeJs

Buat kamu kamu yang sedang belajar mengenai teknik scrapping atau grabber mungkin pernah mengalami error cors origin ketika hendak mengambil DOM HTML dari asal domain yang berbeda menggunakan Request GET.

Sebagai Contoh, coba kamu jalankan script berikut :

var http = new XMLHttpRequest();
http.open('GET', "https://www.maskoding.com", true);
http.onreadystatechange = function () { //Call a function when the state changes.
    if (http.readyState == 4 && http.status == 200) {
        console.log(http.responseText);
    };
};
http.send();

Script di atas adalah script yang berfungsi untuk melakukan permintaan request type GET untuk mengambil DOM HTML dari sebuah url website (dalam hal ini urlnya adalah www.maskoding.com). Ketika kamu jalankan script di atas, maka akan menghasilkan error cors origin yang bisa kamu lihat di console inspect element. Hasilnya lebih kurang seperti gambar berikut ini :

Error disini diakibatkan browser tidak mengijinkan permintaan request header karena akses permintaan bukan dari link url yang sama. Masih bingung ???

Baik, saya akan jelaskan sedikit.

Misalnya ni, kamu punya website dengan alamat domain www.contoh.com. Lalu kamu melakukan permintaan request header menuju url www.maskoding.com. Nah, disini kamu bakal nerima respon error cors origin, karena sumber asal domain (www.contoh.com) berbeda dengan sumber domain tujuan request header yang kamu kirim (www.maskoding.com).

Lain halnya jika kamu melakukan request header dimana sumber asal domain dan sumber domain permintaan-nya adalah sama. Maka error ini tidak akan muncul.

Sebenarnya, error cors origin ini muncul karena Browser (Chrome) menolak semua permintaan request header bila mana server sumber domain (dalam hal ini contohnya www.maskoding.com) tidak menyertakan respon "Access-Control-Allow-Origin".

Jika server sumber domain menyertakan code berikut di responnya, misalnya :

Access-Control-Allow-Origin:'www.maskoding.com'

maka sumber asal domain ( dalam hal ini www.contoh.com) dapat mengakses DOM HTML dari sumber domain tujuan (dalam hal ini www.maskoding.com).

Sampai disini paham ya.

Bagaimana Solusinya ??

Nah, untuk mengakalinya kita bisa membuat sebuah Rest Api Bypass Cors Origin menggunakan NodeJs. Disini saya telah membuat sebuah link rest api baypass cors origin nya. Berikut ini linknya :

https://origin.maskoding.com/?url=https://www.maskoding.com

Keterangan:
- Link yang saya tandai warna hijau adalah link rest apinya, sedangkan yang saya tandai warna kuning adalah target link url yang kita minta atau ambil DOM HTML nya.


Sekarang, kita modifikasi script yang sebelumnya error. Berikut hasil modifikasi scriptnya :

var http = new XMLHttpRequest();
http.open('GET', "https://origin.maskoding.com/?url=https://www.maskoding.com", true);
http.onreadystatechange = function () { //Call a function when the state changes.
    if (http.readyState == 4 && http.status == 200) {
        console.log(http.responseText);
    };
};
http.send();

Coba kamu jalankan script tersebut, maka error cors origin sudah tidak muncul lagi dan kamu akan menerima respon DOM HTML dari link url www.maskoding.com.


Nah, bagaimana isi script yang ada di server NodeJsnya ???


Berikut ini isi scriptnya:

var http = require('http');
var unirest = require('unirest');
var random_useragent = require('random-useragent');
const isUrl = require("is-valid-http-url");

http.createServer(function (req, res) {
    res.writeHead(200, {
        "Access-Control-Allow-Origin": "*",
        "content-type": "text/plain"
    });
    if (req.url.split("/?url=")[1] == undefined == false && isUrl(req.url.split("/?url=")[1]) == true && req.method === "GET") {
        unirest('GET', req.url.split("/?url=")[1])
            .headers({
                'user-agent': random_useragent.getRandom()
            })
            .end(function (resku) {
                res.end(resku.raw_body);
            });
    } else {
        res.end("error!, Example: https://origin.maskoding.com/?url=https://www.maskoding.com")
    };
}).listen(80);

Terlihat, bahwa saya menambahkan kode "Access-Control-Allow-Origin": "*"  di dalam script tersebut, yang mana artinya server mengijinkan untuk siapapun yang meminta request url.

Cara Kerja Script Baypass Cors Origin

Cara kerja script ini adalah sebagai berikut :

1. Mula -mula kamu melakukan permintaan request header type GET ke server melalui link url rest api tersebut.
2. Server menerima request dari link rest api yang kamu kirim barusan. Di dalam link rest api ini terdapat property link (dalam hal ini contohnya www.maskoding.com).
3. Lalu server akan mengambil DOM HTML dari link url (dalam hal ini adalah link www.maskoding.com) melalui permintaan request header di sisi server.
4. Setelah DOM HTML didapatkan, maka server akan meneruskannya ke domain kamu (dalam hal ini adalah link domain asal).

Sebenarnya banyak link rest api yang bertebaran di google. Tapi disini saya hanya menjelaskan cara kerja dan cara membuat link rest api baypass cors origin sendiri. Perlu kamu ketahui, link url rest api baypass origin yang bertebaran di internet memiliki batas limit dan kinerjanya kurang bagus karena banyak di akses oleh orang banyak. Oleh karena itu, jika kamu paham dan mengerti cara kerjanya apalagi cara buatnya, tentunya hal ini dapat membantu kamu dalam menyelesaikan project yang berhubungan dengan scrapping atau grabbing.

Mungkin update artikel selanjutnya saya akan menambahkan untuk Baypass Cors Origin Type POST.

Jika kamu memiliki pertanyaan seputar artikel ini, silahkan komentar di bawah. Semoga artikel ini bermanfaat.