Melakukan Request Menuju Web Lain Dengan CORS

Posted by Made Subali | 2 Comments

Cross Origin Resource Sharing atau CORS merupakan cara untuk aplikasi web dapat berkomunikasi dengan aplikasi web lainnya. Misalnya saya mengembangkan dua aplikasi web dengan nama domain http://myone.com/ dan http://mytwo.com/ pada kedua aplikasi web tersebut dapat saling mengakses fungsi-fungsi yang dimilikinya dengan menggunakan cara CORS.

Sebagai contoh pada web http://myone.com/ melakukan request data ke http://mytwo.com/ hal ini dapat dilakukan dengan menggunakan CORS.

Pada artikel saya kali saya akan membuat implementasi CORS sederhana menggunakan bahasa pemrograman PHP dan JavaScript. Namun sebelumnya pastikan anda membangunnya menggunakan dua komputer atau PC yang saling terkoneksi dengan IP Address yang berbeda. Misalnya:

  • PC1 = 192.168.1.1
  • PC2 = 192.168.1.2

Skenario pada PC1 terdapat perintah untuk mengembalikan data nama-nama hari dengan format JSON, kemudian pada PC2 akan melakukan request untuk mendapatkan nama-nama hari tersebut dari PC1.

Dari skenario diatas apakah anda telah memahaminya? tentu sangat mudah bukan.
Jika sudah mengatur kedua PC agar saling terhubung dan telah memahami skenario dengan baik. Mari mulai membuatnya:

  1. Pada PC1 buatlah sebuah dokumen PHP dengan isi seperti berikut: 
    <?php
header("Access-Control-Allow-Origin: *");

$hari = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'];

return json_encode($hari);
?>
  2. Simpan file tersebut dengan nama hari.php
  3. Pada PC2 buatlah sebuah dokumen HTML dengan isi seperti berikut: 
    <!DOCTYPE HTML>
<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <title>Ini PC 2</title>
 </head>
 <body>
  <button type="button">Get Hari From PC 1</button>
  <p>Nama Hari</p>
  <ul></ul>
  <script type="text/javascript">
   $(document).ready(function(){
    $("button").on("click", function(){
     $.ajax({
      url:"http://192.168.1.1/blog/cors/hari.php",
      type:"POST",
      dataType: "json",
      success:function(data){
       var li = "";

       $.each(data, function(index, value){
        li = li + "<li>"+value+"</li>";
       });

       $("ul").html(li);
      }
     });
    });
   });
  </script>
 </body>
</html>
  4. Simpan file tersebut dengan nama index.html
  5. Jalankan file index.html dengan cara mengetikan url berikut pada web browser http://192.168.1.2/blog/cors/index.html
  6. Hasilnya akan terlihat seperti gambar berikut jika anda telah menekan tombol Get Hari From PC 1:
  7. Hasil dari capture response addon firebug

Catatan penjelasan kode program diatas adalah sebagai berikut:

  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> merupakan tag html yang digunakan untuk menyisipkan file JQuery secara online apabila anda tidak terhubung ke jaringan internet silahkan masukan file JQuery secara manual pada aplikasi web anda.
  • header("Access-Control-Allow-Origin: *"); merupakan bagian yang akan mengirimkan http header yang memeriksa client (192.168.1.2) apakah sesuai dengan nilai yang ditentukan. Seperti pada kode program di atas nilainya adalah * yang berarti semua client dapat mengaksesnya.
  • url:"http://192.168.1.1/blog/cors/hari.php", merupakan alamat url dari server yang menuju ke file hari.php apabila anda menyimpan file hari.php pada alamat lain silahkan disesuaikan.

Demikian artikel sederhana saya kali ini apabila ada kesulitan dalam mengikuti tutorial di atas anda dapat menanyakannya dengan meninggalkan komentar.

Categories: ,

2 comments:

Subscribe to: Post Comments - Atom