CORS Cross Origin Resource Sharing

Pada pemograan Web Service, sering ditemukan masalah dimana Browser menolak menampilkan hasil dari server API, dikarenakan Browser mendapatkan hasil dari server tsb berbeda domain dengan saat command tsb dikirim.

Sebagai contoh:

Di server localhost:8000 sudah disediakan 2 button "Endpoint1" dan "Endpoint2".

Dimana jika di klik "Enpoint1" maka akan jalan sebuah service "http://localhost:3000/endpoint1" sbb:

Nah jika button "Endpoint1" di klik maka akan muncul CORS error, seperti ini:

Akan tetapi jika yang di klik button "Endpoint2" tidak muncul error, dan Text sukses di tampilkan, spt ini:

Kenapa "Endpoint1" gagal?

Karena pada saat response "Helloe from Endpoint1" sampai ke browser, browser mengingat tadi request itu di eksekusi dari localhost:8000, sedangkan respon dari server yaitu dari localhost:3000.

Ingat bahwa walau ada di mesin yang sama (localhost) tapi karena port berbeda maka dianggap domain berbeda.

Disini Brower merasa ada crossing domain. Request datang dari Domain localhost:8000 sedangkan Response datang dari localhost:3000.

Solusinya:
Di domain localhost:3000 harus di setting bahwa Respon harus ditambahkan header:

"Access-Control-Allow-Origin, "http://localhost:8000"

Jika ini ditambahkan spt pada service "http://localhost:3000/endpoint2", maka tidak muncul pesan error.


Solusi global:

Diatas dijelaskan bahwa apabila ditambahkan header:

"Access-Control-Allow-Origin, "http://localhost:8000"

Maka akses Webservice dari http://localhost:8000 saja yang akan sukses. Dari Webserver lain (atau lebih tepatnya dari Domain lain) akan fail. Jika ingin semua domain bisa maka tambahkan:

"Access-Control-Allow-Origin, "*"

Catatan akhir:

Domain dalam WebService artinya IP_address:TCP_port

Jadi walau IP_address sama, jika port berbeda, maka ini dianggap domain yang berbeda, sehingga potensi terjadi CORS errors.

Lebih jauh tentang CORS error dapat di lihat di sini.