DataV：Cara Mengonfigurasi Data Lintas Domain

Informasi latar belakang

Pengguna A ingin membuat aplikasi visualisasi untuk menampilkan data kepada pelanggan. Jika Anda mengatur Data Source Type ke API, dua kondisi berikut dapat terjadi:

• Jika API berada di server jarak jauh, Anda dapat memilih Server Proxy Request (select this check box if the cross-domain cannot be accessed). Jika Anda memilih Server Proxy Request (This option is available if the cross-domain is inaccessible), server backend DataV akan menginisiasi permintaan ke API. Batas waktu adalah 10 detik dan tidak dapat diubah.

• Jika API adalah API lokal, jangan pilih Server Proxy Request (select this check box when the cross-domain cannot be accessed), dan Anda harus mengonfigurasi data lintas domain untuk API tersebut. Jika Anda tidak memilih Server Proxy Request (this can be selected if the cross-domain is inaccessible), browser lokal mengakses API, dan batas waktu ditentukan oleh browser.

Apa itu konfigurasi data lintas domain?

Pengguna A memiliki data dari situs webnya sendiri serta situs web pengguna B. Data di situs web Pengguna A dapat diakses melalui antarmuka seperti http://userA.com/page1. Pengguna B menyediakan antarmuka data http://userB.com/page2, tetapi ketika Pengguna A mengirimkan permintaan ajax JavaScript ke situs web Pengguna B, ia tidak akan mendapatkan data dari userB.com.

Buka browser dan Anda dapat melihat teks berikut yang ditandai dengan warna merah (Chrome). Ini menunjukkan adanya masalah lintas domain.

XMLHttpRequest gagal memuat http://userB.com/page2. Sumber daya yang diminta tidak memiliki header "Access-Control-Allow-Origin". Oleh karena itu, situs asal "http://userA.com/page1 /" tidak diizinkan untuk mengakses.

Penyebab masalah lintas domain

Setiap situs web memiliki berbagai antarmuka pengguna, antarmuka pesanan, dan antarmuka artikel. Hal ini berarti bahwa siapa saja dapat meletakkan data yang dikembalikan oleh antarmuka-antarmuka ini ke dalam situs web mereka sendiri, bahkan secara real-time. Oleh karena itu, browser menggunakan kebijakan same-origin untuk membatasi skrip dari satu situs asal agar tidak mendapatkan sumber daya dari situs asal lain.

Solusi

• A.x.com dan B.x.com lintas domain

  Jika subdomain dari dua situs berbeda, terdapat masalah lintas domain. Contohnya adalah http://56.alibaba.com/ dan http://trade.alibaba.com/.

  Tambahkan kode berikut ke halaman untuk menyatakan halaman sebagai domain tingkat lebih tinggi.

  <script>
    document.domain = "x.com";
  </script>

• JSONP

  Meskipun JSONP adalah solusi klasik, efisien, dan kompatibel dengan sebagian besar browser, DataV does not support this method karena memiliki risiko cross-site scripting yang sangat tinggi. Anda dapat berkonsultasi dengan informasi terkait untuk detail lebih lanjut.

• Berbagi Sumber Daya Lintas Domain (CORS)

  Catatan

  Berbagi Sumber Daya Lintas Domain: Cross Origin Resource Sharing, disingkat CORS. Sudah kompatibel dengan sebagian besar browser baru.

  • Prinsip Dasar: Tambahkan header HTTP kustom ke situs asal B (API lokal) sehingga situs web lain dapat mengakses sumber dayanya.

  • Prosedur

    • Jika data antarmuka situs asal B perlu digunakan oleh sebuah situs web, tambahkan konten berikut ke informasi header yang dikembalikan oleh server data.

      Access-Control-Allow-Origin: http://userA.com

    • Jika data antarmuka situs asal B perlu digunakan oleh beberapa situs web, program harus digunakan untuk menghasilkan informasi header secara dinamis. Sebagai contoh, gunakan kode PHP.

      <?php 
      if (is_my_code($_SERVER['HTTP_ORIGIN'])) {
      header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
      }
      ?>

    • Jika data antarmuka situs asal B perlu digunakan oleh situs web yang digunakan, "*" dapat digunakan.

      Access-Control-Allow-Origin: *

  • Tambahkan Tindakan Cookie: Secara default, CORS tidak berisi informasi cookie. Jika Anda ingin menambahkan cookie, ikuti langkah-langkah berikut.

    1. Tambahkan parameter withCredentials, menggunakan jQuery sebagai contoh.

       $.ajax({
        url: "http://userB.com/page2",
        xhrFields: {
          withCredentials: true
        }
       });

    2. Atur server untuk mengizinkan penggunaan header kredensial, tetapi tidak wildcard "*", menggunakan PHP sebagai contoh.

       <?php 
       if (is_my_code($_SERVER['HTTP_ORIGIN'])) {
       header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); // Tidak izinkan "*"
       header("Access-Control-Allow-Credentials:true");
       }
       ?>

       Untuk informasi lebih lanjut, lihat HTTP RAM (CORS).