Cara mengaktifkan CORS di API Web Anda

Pembatasan keamanan pada kebijakan keamanan browser Anda mencegah browser web Anda membuat permintaan AJAX ke server di domain lain. Ini juga dikenal sebagai kebijakan asal yang sama. Dengan kata lain, keamanan browser built-in mencegah halaman web dari satu domain untuk mengeksekusi panggilan AJAX di domain lain.

Di sinilah CORS (Cross-Origin Resource Sharing) membantu. CORS adalah standar W3C yang memungkinkan Anda untuk keluar dari kebijakan asal yang sama yang diadopsi oleh browser untuk membatasi akses dari satu domain ke sumber daya milik domain lain. Anda dapat mengaktifkan CORS untuk API Web Anda menggunakan paket API Web masing-masing (bergantung pada versi API Web yang digunakan) atau middleware OWIN.

Perhatikan bahwa asal permintaan terdiri dari skema, host, dan nomor port. Jadi, dua permintaan dianggap dari asal yang sama jika memiliki skema, host, dan nomor port yang sama. Jika salah satu di antaranya berbeda, permintaan akan dianggap lintas asal, yaitu tidak termasuk ke asal yang identik.

Aktifkan dukungan CORS di ASP.NET Web API

ASP.NET Web API memberikan dukungan yang sangat baik untuk CORS. Untuk memberikan dukungan untuk CORS di ASP.NET Web API 2, Anda perlu menggunakan paket Microsoft.AspNet.WebApi.Cors NuGet. Untuk menginstal paket ini, Anda dapat menjalankan perintah berikut dari konsol manajer paket NuGet.

Instal-Paket Microsoft.AspNet.WebApi.Cors

Sebagai alternatif, Anda dapat memilih proyek Anda di jendela Solution Explorer dan menginstal paket melalui manajer paket NuGet.

Jika Anda menggunakan Web API 1.0, Anda dapat mengaktifkan dukungan CORS termasuk pernyataan berikut dalam penanganan kejadian Application_BeginRequest dari file Global.asax.cs.

HttpContext.Current.Response.AddHeader ("Access-Control-Allow-Origin", allowOrigin); 

HttpContext.Current.Response.AddHeader ("Access-Control-Allow-Methods", "GET, POST");

Perhatikan bahwa "allowOrigin" di sini adalah variabel string yang berisi asal permintaan yang ingin mengakses sumber daya. 

Dukungan untuk CORS dapat diaktifkan di tiga level. Ini termasuk yang berikut:

  • Tingkat aksi
  • Level pengontrol
  • Tingkat global

Aktifkan CORS di tingkat Global

Untuk mengaktifkan CORS di tingkat Global, Anda perlu memanfaatkan metode EnableCors dari kelas HttpConfiguration seperti yang ditunjukkan dalam cuplikan kode yang diberikan di bawah ini.

public static void Register (konfigurasi HttpConfiguration)

        {

            string origin = "// localhost: 50164 / WebClient /";

            EnableCorsAttribute cors = EnableCorsAttribute baru (asal, "*", "GET, POST");

            config.EnableCors (cors);

            // Tentukan konfigurasi dan layanan API Web di sini

            // Tentukan rute API Web di sini          

        }

    }

Lihat potongan kode yang diberikan di atas. Perhatikan bagaimana asal permintaan telah ditentukan. Parameter * menyiratkan semua header permintaan. Jadi, permintaan GET dan POST dari domain yang ditentukan akan diterima, semua permintaan lainnya akan ditolak.

Aktifkan CORS di level Controller

Anda juga dapat mengaktifkan dukungan CORS di level pengontrol. Untuk melakukannya, tentukan atribut [EnableCors] ke pengontrol API Web Anda seperti yang ditunjukkan di bawah ini.

  [EnableCors (origins: "// localhost: 50164 /", headers: "*", metode: "*")]

    kelas publik AuthorsController: ApiController

    {  

        // Tulis metode pengontrol API Web Anda di sini

    }

Aktifkan CORS di tingkat Tindakan

Demikian pula, Anda juga dapat mengaktifkan CORS di tingkat tindakan menggunakan atribut [EnableCORS]. Berikut adalah contoh yang mengilustrasikan bagaimana ini dilakukan.

kelas publik AuthorsController: ApiController

    {

        [EnableCors (origins: "// localhost: 50164 /", headers: "*", metode: "*")]

        publik IEnumerable Get ()

        {

            kembalikan string baru [] {"Joydip Kanjilal", "Steve Smith"};

        }

    }

Nonaktifkan CORS untuk tindakan tertentu

Sekarang, Anda mungkin perlu menonaktifkan CORS untuk tindakan tertentu atau sekelompok tindakan. Fitur ini mungkin berguna ketika Anda telah mengaktifkan CORS di tingkat global dan sekarang Anda ingin menonaktifkannya untuk salah satu tindakan lainnya karena alasan keamanan. Cuplikan kode berikut mengilustrasikan bagaimana Anda bisa mencapai ini menggunakan atribut [DisableCors].

[DisableCors ()]

publik IEnumerable Get ()

   {

      kembalikan string baru [] {"Joydip Kanjilal", "Steve Smith"};

   }

Jika Anda menggunakan ASP.NET Core, Anda harus menambahkan paket Microsoft.AspNetCore.Cors melalui NuGet ke proyek Anda dan kemudian tulis pernyataan berikut di file Startup.cs untuk menyiapkan dukungan CORS.

public void ConfigureServices (layanan IServiceCollection)

{

    services.AddCors ();

}

Anda dapat mengaktifkan CORS menggunakan middleware CORS - Anda dapat memanfaatkan metode ekstensi UseCors dalam hal ini. Alternatifnya, Anda dapat mengaktifkan CORS pada pengontrol atau tingkat tindakan menggunakan atribut EnableCors dengan cara yang sama seperti yang kita lakukan sebelumnya di artikel ini. Demikian pula, untuk menonaktifkan CORS, Anda dapat menggunakan atribut [DisableCors].