admin@medantechno.com
0852 0 7117 555
medantechno.com
Loading...... Refresh
Loading Slide Show...
30 Oktober 2018

Cara ampuh mengatasi Access-Control-Allow-Origin cross domain javascript

Cross Origin adalah mekanisme untuk membatasi sumber daya yang ada pada halaman web untuk dipanggil dari domain lain di luar domain tempat sumber data pertama berasal.

 

Sering kali kita menghadapi pengambilan API (JSON) dengan javascript dan mendapati masalah seperti Access-Control-Allow-Origin 

Biasanya masalah ini muncul ketika kita melakukan request ajax cross domain atau domain berbeda.

 

Banyak cara bisa kita cari di internet untuk mengatasi masalah ini, tapi menurut saya cara dibawah ini yang paling ampuh.

Nah untuk mengatasi masalah ini, saya mempunyai cara ampuh yaitu dengan membuat 1 file PHP yang bertugas sebagai proxy.

Berikut kode proxy.php yang akan kita jadikan proxy atau perantara dengan server API aslinya.

 

Dibawah ini codenya:

header("Acces-Control-Allow-Origin:*");
header("Acces-Control-Allow-Headers:*");
header('Content-Type:application/json');

$url = urldecode($_GET['domain']);
httpsCurl($url);
function httpsCurl($url) 
{

$header = array("Accept: application/json");
$ch = curl_init();
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_FAILONERROR, 0);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322)');

$retValue = curl_exec($ch);
$response = json_decode(curl_exec($ch));
$ee       = curl_getinfo($ch);

echo ($retValue);

}

 

Simpan file dengan nama proxy.php kemudian panggil kembali sumber API anda dengan mengarahkan URL sumbernya melalui proxy.php terlebih dahulu, dengan menempatkan URL sumber tersebut sebagai variable domain.

 

Untuk lebih memahami penggunaannya bisa lihat gambar dibawah ini.

Setelah javascript dibuat seperti diatas, kemudian lihat hasilnya di console log. Data API anda akan muncul.

Atau download project testing nya di github https://github.com/djsamm88/Allow-Origin-proxy-PHP

Semoga bermanfaat.





Artikel Lainnya


Portofolio

  • Agenda
  • Date Title
    15 Februari 2017 Parking Gate Job
    13 September 2016 Finishing pay-inm.co.id
    14 September 2016 Finishing Company Profil Masjid Al-iklas Medan

Loading Counter...



Share...

  • Partner