AMP FIX Cors Origin dengan PHP

Bismillaahirrohmaanirrohiim…

Umumnya masalah pemrograman terjadi saat dibuat, namun setelah di launching, akan muncul beberapa error, itu sudah biasa. Makanya perlu di testing beberapa kali dengan bermacam kondisi agar program berjalan dengan baik.

Misalnya saja, saat kita membuat halaman web dengan AMP, saat dicoba di local jalan dengan baik. Bahkan saat diupload pun, berjalan dengan semestinya. Masalahnya baru muncul saat halaman tersebut di index google kemudian form method post nya dengan redirect tidak mau berjalan karena masalah kebijakan CORS Origin.

Awalnya saya sempat tidak mengetahui pokok masalahnya sehingga saya menyangka program saya salah pada saat membuat metode redirect, namun ternyata masalah utamanya adalah CORS Origin AMP yang tidak mau di set * saat header Access-Control-Allow-Credentials di set true.

Saya browsing sana sini untuk mencari solusi kenapa halaman tidak mau redirect saat halaman amp di cache google, ternyata tidak menemukan hasil. Keyword pencarian saat itu adalah “amp post redirecto not working“.

Setelah berdoa, saya coba men debug url AMP yang dimaksud menggunakan console browser chrome yang di set versi mobile, ternyata disitu dijelaskan ada error yang mengatakan kalau “access-control-allow-origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’.”

Yang artinya jika access credential di set true, maka access origin harus diset secara spesifik. Inilah kemudian saya langsung rubah kode PHP saat submit POST dengan redirect seperti di bawah ini:

if (!isset($_SERVER['HTTP_ORIGIN'])) {
    exit('who');
}
//header("Access-Control-Allow-Origin: *");//ini yg harus diubah
header("Access-Control-Allow-Credentials: true");
$valid_cors = array('https://www.domain.com', 'https://domain.com', 'https://www.google.com', 'https://google.com', 'https://domain-com.cdn.ampproject.org','https://ampproject.org');

if (!in_array($_SERVER['HTTP_ORIGIN'], $valid_cors)) {
    exit('who');
}

header("Access-Control-Allow-Origin: ".$_SERVER['HTTP_ORIGIN']);
header("AMP-Access-Control-Allow-Source-Origin: " . $_SERVER['HTTP_ORIGIN']);

header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");
header('P3P: CP="CAO PSA OUR"'); // Makes IE to support cookies
header('Content-Type: application/json');

//kode kode PHP

header("AMP-Redirect-To: ".$url_redirect);
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin, AMP-Redirect-To");
echo json_encode(array('message'=>'success','navigateTo'=>$url_redirect));

Pada form method post nya, kodenya bisa dijadikan seperti ini:

<form
method="POST"
action-xhr="https://domain.com/submit.post.php" target="_top"
autocomplete="off"
id="formid"
on="submit:AMP.setState({someState: 'somestate',someboolean: false}),idareadiv.scrollTo();
    submit-success:AMP.navigateTo(url=event.response.navigateTo);"
>

Alhamdulillah, akhirnya masalah CORS Origin AMP dengan PHP dapat diselesaikan.

Semoga bermanfaat…