perkenalan
Domain silang adalah pertanyaan yang sering saya tanyakan dalam wawancara harian. Istilah ini sering muncul di dunia front-end. Alasan utamanya adalah karena pembatasan keamanan (strategi yang sama-orisinal, yaitu, javascript atau cookie hanya dapat mengakses konten di bawah domain yang sama). Karena kami pasti perlu melakukan operasi lintas domain selama pengembangan proyek harian, kemampuan lintas domain juga merupakan salah satu keterampilan dasar insinyur front-end.
Seperti kebanyakan solusi lintas domain, JSONP juga merupakan pilihan saya, tetapi suatu hari PM perlu diubah, dan fungsi tertentu perlu diubah untuk mendukung posting, karena jumlah data yang dikirim relatif besar, dan bentuk GET tidak dapat ditangani. Jadi saya telah berjuang dengan CORS yang telah lama diketahui (berbagi sumber daya lintas asal), dan artikel di sini adalah notasi dan ringkasan singkat selama periode yang berjuang.
• Apa yang bisa dilakukan CORS:
Penggunaan AJAX yang normal membutuhkan pertimbangan normal masalah silang, sehingga programmer hebat juga telah berjuang dengan solusi untuk masalah domain silang, seperti JSONP, Flash, Ifame, XHR2, dll.
• Prinsip CORS:
CORS mendefinisikan mekanisme untuk akses lintas domain, yang memungkinkan AJAX untuk mencapai akses lintas domain. CORS memungkinkan aplikasi jaringan pada satu domain untuk mengirimkan permintaan AJAX lintas domain ke domain lain. Menerapkan fungsi ini sangat sederhana, cukup kirim header respons oleh server.
Mari kita ke topik di bawah ini untuk detail sebagai berikut:
Permintaan HTTP lintas situs mengacu pada permintaan HTTP di mana domain di mana sumber daya memulai permintaan tersebut berada berbeda dari domain di mana sumber daya memulai permintaan tersebut.
Misalnya, jika saya memperkenalkan sumber daya stasiun B (www.b.com/images/1.jpg) melalui tag <mmg> di situs web A (www.a.com), kemudian stasiun A akan memulai permintaan lintas situs ke stasiun B.
Permintaan lintas situs untuk sumber daya gambar semacam ini diizinkan, dan permintaan lintas situs yang serupa termasuk file CSS, file JavaScript, dll.
Namun, jika permintaan HTTP dimulai dalam skrip, itu akan dibatasi oleh browser karena alasan keamanan. Misalnya, untuk memulai permintaan HTTP menggunakan objek XMLHTTPREQuest, Anda harus mematuhi kebijakan asal-kata yang sama.
Yang disebut "kebijakan asal-asal" berarti bahwa aplikasi web hanya dapat menggunakan objek XMLHTTPREQuest untuk memulai permintaan HTTP ke domain tempat asal. Sumber permintaan dan objek permintaan ini harus berada di domain yang sama.
Misalnya, http://www.a.com, protokol situs web ini adalah http, nama domainnya adalah www.a.com, dan port default adalah 80. Kemudian berikut ini adalah situasi homolognya:
• http: //www.a.com/index.html homogen
• https: //www.a.com/a.html sumber yang berbeda (protokol yang berbeda)
• http: //service.a.com/testservice/test berbagai sumber (nama domain berbeda)
• http: //www.b.com/index.html sumber yang berbeda (nama domain berbeda)
• http: //www.a.com: 8080/index.html Sumber yang berbeda (port yang berbeda)
Untuk mengembangkan aplikasi web yang lebih kuat dan lebih kaya, permintaan lintas domain sangat umum. Jadi, bagaimana Anda membuat permintaan lintas domain tanpa melepaskan keamanan?
W3C merekomendasikan mekanisme baru, yaitu berbagi sumber daya silang (CORS).
Cross-Origin Resource Sharing (CORS) memastikan keamanan permintaan melalui deklarasi kolaboratif klien + server. Server akan menambahkan serangkaian parameter permintaan HTTP (seperti akses-kontrol-awal-origin, dll.) Ke header permintaan HTTP untuk membatasi permintaan domain mana dan jenis permintaan mana yang dapat diterima. Klien harus mendeklarasikan sumbernya sendiri (orgin) saat memulai permintaan, jika tidak, server tidak akan memprosesnya. Jika klien tidak menyatakan, permintaan bahkan akan secara langsung dicegat oleh browser dan tidak dapat mencapai server. Setelah menerima permintaan HTTP, server akan membandingkan domain, dan hanya permintaan dari domain yang sama yang akan diproses.
Contoh penggunaan CORS untuk mengimplementasikan permintaan lintas domain:
Klien:
Fungsi getHello () {var xhr = new xmlHttpRequest (); xhr.open ("post", "http://b.example.com/test.ashx", true); xhr.setrequestheader ("content-type", "Application/X-WWW-Form-urlencoded"); // Nyatakan sumber permintaan xhr.setRequestheader ("Origin", "http://a.example.com"); xhr.onreadystatechange = function () {if (xhr.readystate == 4 && xhr.status == 200) {var responsEtext = xhr.Responsetext; console.info (responseText);}} xhr.send ();}Server:
Tes kelas publik: ihttphandler {public void ProcessRequest (httpcontext context) {context.response.contenttype = "text/polos"; // menyatakan permintaan menerima dari semua domain konteks.response.addheader ("Access-Control-Allow-Origin", "*"); Isreusable {get {return false;}}}Aktifkan akses lintas domain di API Web
CORS adalah pernyataan kolaborasi sisi server dan klien untuk memastikan keamanan permintaan. Oleh karena itu, jika Anda perlu mengaktifkan COR di API Web, Anda juga perlu mengonfigurasinya. Untungnya, tim ASP.NET Microsoft menyediakan solusi yang diaktifkan lintas domain resmi, yang hanya perlu ditambahkan di Nuget.
Kemudian gunakan konfigurasi berikut di app_start/webapiconfig.cs untuk mencapai akses lintas domain:
Public Static Class WebApiconfig {public static void register (httpconfiguration config) {// Konfigurasi dan layanan API Web // Konfigurasikan API Web untuk menggunakan otentikasi token Bearer saja. config.suppressDefaulThostAuthentication (); config.filters.add (hostAuthenticationFilter baru (oauthdefaults.authenticationType)); // routing API web Config.maphtpattributeroutes (); config.Routes.maphtproute (name: "name:" name: "" Name: "" "api/{controller}/{id}",defaults: new { id = RouteParameter.Optional });// Allow Web API cross-domain access EnableCrossSiteRequests(config);config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));}private static void EnableCrossSiteRequests (httpconfiguration config) {var cors = enableCorsAttribute baru (Origins: "*", header: "*", Metode: "*"); config.enableCors (CORS);}}Karena browser di bawah IE10 tidak mendukung CORS, CORS bukan solusi domain lintas arus utama di Cina saat ini. Namun, dengan rilis Windows 10 dan penurunan bertahap IE, dapat diperkirakan bahwa CORS akan menjadi solusi standar lintas domain dalam waktu dekat.
Di atas adalah solusi silang JS yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu Anda!