Saat saya mencoba membuat daftar post terakhir menggunakan tag amp-list pada halaman AMP, terdapat sebuah error. Meskipun saat membuka halaman AMP secara langsung, daftar post muncul serta tidak ada error pada console. Error ini baru muncul setelah halaman kita sudah berhasil terindex oleh google.
Berikut adalah pesan errornya
Access to fetch at 'https://nadaft.com/blog/latest.json?__amp_source_origin=https%3A%2F%2Fnadaft.com' from origin 'https://nadaft-com.cdn.ampproject.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Solusinya adalah dengan menambahkan header Access-Control-Allow-Origin dan mendefinisikannya sebagai '*' jika ingin mengizinkan ke semua domain. Atau jika ingin spesifik ke domain tertentu. Dalam hal ini adalah domain AMP Project. Untuk mengetahui domain AMP project anda formatnya adalah https://<your domain>.cdn.ampproject.org
Sebagai contoh jika domainmu adalah punokawan.com maka domain AMP Projectmu adalah https://punokawan.com.cdn.ampproject.org untuk lebih jelasnya silahkan kunjungi https://www.ampproject.org/docs/fundamentals/amp-cors-requests
Berikut ini adalah cara menambahkannya pada Laravel. Jika anda tidak menggunakan Laravel, sesuaikan saja dengan framework yang kamu gunakan.
Pada fungsi controller yang anda gunakan untuk membuat json, tambahkan header Access-Control-Allow-Origin dengan cara seperti berikut
Jika ingin mengizinkan ke semua domain
return response($data)->header('Access-Control-Allow-Origin', '*');
Jika hanya mengizinkan ke domain spesifik
return response($data)->header('Access-Control-Allow-Origin', 'https://nadaft-com.cdn.ampproject.org');