has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Okayyy langsung aja! Ketika saya ngoprek API dengan menggunakan .NET CORE. Kode API seperti dibawah.

Saya coba running API nya. saya consume API dengan menggunakan client angular muncul error

“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”

WTF! awalnya saya kira ada yang salah dengan security browser. Saya menggunakan browser chrome. Saya coba minta petunjuk mbah Google.Oh! ternyata ini gara-gara CORS.

CORS : Cross Origin Resource Sharing

Hal ini terjadi karena web application saya ada di :

http://localhost:4200/

dan API saya ada di :

https://localhost:5001/api/values

jadi beda asal yang web application port nya 4200 yang API port nya 5001, jadi adalah isu security!.

Okayyy! Okayyyy! konon katanya harus install extension CORS. Extension tersebut bisa enable atau disable CORS. Okay Okay saya enable! jeng jreng ! error yang sama tetep muncul.

Saya coba petunjuk lain dari mbah stackoverflow. Katanya harus buka browser nya dari terminal dengan menonaktifkan CORS dengan perintah seperti dibawah :

open /Application/Google \ Chromre.app — args — disable-web-security

Saya coba tembak lagi API nya. Jeng Jreng!!! WTF!@#$@#$@!@#$$. Error yang sama tetap muncul. Neraka Ngoding banget!!.

Hmmm? never give up!. Mungkin ini masalahnya adalah dari API nya . Saya coba tanya mbah google jreng! ada package dari nuget.

Microsoft.AspNet.WebApi.cors

Saya download langsung implementasikan di file Startup.cs

Saya tambahkan line Kode di method ConfigureServices dan method configure.

services.AddCors(o => o.AddPolicy(“MyPolicy”, builder =>
{
  builder.AllowAnyOrigin()
   .AllowAnyMethod()
   .AllowAnyHeader();
 }));

Kode diatas mendefinisikan CORS membolehkan asal seluruh request API.

app.UseCors(“MyPolicy”);

Kode diatas policy digunakan diseluruh API. Akhirnya jalan.

Okayy! sekian dulu kawan-kawan. Salam Neraka Ngoding huh!