Rumah hujung hadapan web tutorial js 对于跨域的详细介绍

对于跨域的详细介绍

Jun 26, 2017 am 11:42 AM
belajar faham

 要学习跨域策略,首先要知道为什么跨域:

  浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用。

具体点来说,网站请求的协议名protocol、 主机host、 端口号port的其中一个不同,网站之间的数据传输就形成了跨域调用。

这篇文章的所有例子均使用Node.js作为服务端进行的,同时是对端口号不同的情况来举例子,本次将会使用3001和3002俩个

端口号。

首先,构建一个表单,如图:

  

对于正常的非跨域的请求,一般是这样子的:

html

 

前端js部分(ajax)

服务端的代码:

注:此处读取post方法的内容是使用了Node.js的formidable模块,之后所有的post的数据,均使用此模块接受

请求页面返回的结果是:

现在的返回结果是属于访问3001端口的,那么如果访问3002端口会是什么样子呢?

对!他就成了这样了!他不允许你跨端口号访问!!!

但是呢,在服务端的控制台却有这样的输出:

这是什么意思呢?接下来,附上代码,一点点说明白:

ajax请求部分值修改了url部分:

也就是把端口号3001换成了3002,其余的与上面的一模一样,

服务端代码与上面的一样,只不过监听了3002端口,

通过代码可以发现,即使端口号不同,ajax中服务端仍能收到前台传过来的数据,

也就是上面控制台打印出来的数据,说明不是服务端拒绝跨站请求,而是服务端

收到数据并处理返回时,被浏览器给限制拦截了。 

当然解决跨域限制的方法也有很多,现在讲这么4种:

  1.利用 JSONP 实现跨域调用

    首先,借用一段话介绍一下JSONP:

    JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题。其原理是根据 XmlHttpRequest 对象受到同源策略的影响,

           而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料。用 JSONP获取的</p> <p>           不是 JSON 数据,而是可以直接运行的 JavaScript 语句。</p> <p>    (1)使用Jquery的$ajax来实现jsonp</p> <p>        这时,ajax请求代码为:</p> <p>      <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/3ec5c16e14e00b5a7e924babc4fc391f-9.png" class="lazy" alt=""></p> <p>          服务端对应的代码为:</p> <p>      <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/a91fb113b3f5cd6d7b5e64c45a16003c-10.png" class="lazy" alt=""></p> <p>      此时,浏览器的控制台会输出:</p> <p>      <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/a91fb113b3f5cd6d7b5e64c45a16003c-11.png" class="lazy" alt=""></p> <p>      这时呢,请大家擦亮双眼,服务端的接受请求方式是get,而发出请求的ajax方式却为post,</p> <p>      这是为什么呢?请看这个东东:</p> <p>      <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/a91fb113b3f5cd6d7b5e64c45a16003c-12.png" class="lazy" alt=""></p> <p>      这个是上面的请求的http头信息,url竟然是按照get方法去传递参数的,所以服务端接受数据采用的get方法,</p> <p>      究其原因还是因为jsonp原理是用<script>标签来发请求的,受限于script的格式,只能用get方法了,传输形式为:</p> <p>      <strong><script src = &#39;http://localhost:3001/blog?callback=jsonpCallback&name=%E5%BC%A0%E4%B8%89&id=05142075&_=1496753697939&#39;</script>

      (2)用js原生

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Belajar untuk menyahpasang pip sepenuhnya dan menggunakan Python dengan lebih cekap Belajar untuk menyahpasang pip sepenuhnya dan menggunakan Python dengan lebih cekap Jan 16, 2024 am 09:01 AM

Tidak perlu lagi pip? Datang dan pelajari cara menyahpasang pip dengan berkesan! Pengenalan: pip ialah salah satu alat pengurusan pakej Python, yang boleh memasang, menaik taraf dan menyahpasang pakej Python dengan mudah. Walau bagaimanapun, kadangkala kita mungkin perlu menyahpasang pip, mungkin kerana kita ingin menggunakan alat pengurusan pakej yang lain, atau kerana kita perlu mengosongkan sepenuhnya persekitaran Python. Artikel ini akan menerangkan cara menyahpasang pip dengan cekap dan memberikan contoh kod khusus. 1. Kaedah menyahpasang pip Berikut akan memperkenalkan dua kaedah biasa untuk menyahpasang pip.

Mendedahkan daya tarikan bahasa C: Mendedahkan potensi pengaturcara Mendedahkan daya tarikan bahasa C: Mendedahkan potensi pengaturcara Feb 24, 2024 pm 11:21 PM

Pesona Pembelajaran Bahasa C: Membuka Potensi Pengaturcara Dengan perkembangan teknologi yang berterusan, pengaturcaraan komputer telah menjadi satu bidang yang telah menarik perhatian ramai. Di antara banyak bahasa pengaturcaraan, bahasa C sentiasa digemari oleh pengaturcara. Kesederhanaan, kecekapan dan aplikasinya yang luas menjadikan pembelajaran bahasa C sebagai langkah pertama untuk ramai orang memasuki bidang pengaturcaraan. Artikel ini akan membincangkan daya tarikan mempelajari bahasa C dan cara membuka kunci potensi pengaturcara dengan mempelajari bahasa C. Pertama sekali, daya tarikan mempelajari bahasa C terletak pada kesederhanaannya. Berbanding dengan bahasa pengaturcaraan lain, bahasa C

Bermula dengan Pygame: Tutorial Pemasangan dan Konfigurasi Komprehensif Bermula dengan Pygame: Tutorial Pemasangan dan Konfigurasi Komprehensif Feb 19, 2024 pm 10:10 PM

Pelajari Pygame dari awal: tutorial pemasangan dan konfigurasi lengkap, contoh kod khusus diperlukan Pengenalan: Pygame ialah perpustakaan pembangunan permainan sumber terbuka yang dibangunkan menggunakan bahasa pengaturcaraan Python Ia menyediakan pelbagai fungsi dan alatan, membolehkan pembangun mencipta pelbagai jenis dengan mudah permainan. Artikel ini akan membantu anda mempelajari Pygame dari awal, dan menyediakan tutorial pemasangan dan konfigurasi yang lengkap, serta contoh kod khusus untuk membolehkan anda bermula dengan cepat. Bahagian Pertama: Memasang Python dan Pygame Pertama, pastikan anda mempunyai

Mari belajar cara memasukkan nombor akar dalam Word bersama-sama Mari belajar cara memasukkan nombor akar dalam Word bersama-sama Mar 19, 2024 pm 08:52 PM

Semasa mengedit kandungan teks dalam Word, anda kadangkala perlu memasukkan simbol formula. Sesetengah lelaki tidak tahu cara memasukkan nombor akar dalam Word, jadi Xiaomian meminta saya untuk berkongsi dengan rakan saya tutorial tentang cara memasukkan nombor akar dalam Word. Semoga membantu kawan-kawan. Mula-mula, buka perisian Word pada komputer anda, kemudian buka fail yang ingin anda edit, dan gerakkan kursor ke lokasi yang anda perlukan untuk memasukkan tanda akar, rujuk contoh gambar di bawah. 2. Pilih [Sisipkan], dan kemudian pilih [Formula] dalam simbol. Seperti yang ditunjukkan dalam bulatan merah dalam gambar di bawah: 3. Kemudian pilih [Insert New Formula] di bawah. Seperti yang ditunjukkan dalam bulatan merah dalam gambar di bawah: 4. Pilih [Radical], dan kemudian pilih radikal yang sesuai. Seperti yang ditunjukkan dalam bulatan merah dalam gambar di bawah:

Ketahui fungsi utama dalam bahasa Go dari awal Ketahui fungsi utama dalam bahasa Go dari awal Mar 27, 2024 pm 05:03 PM

Tajuk: Pelajari fungsi utama dalam bahasa Go dari awal Sebagai bahasa pengaturcaraan yang mudah dan cekap, bahasa Go digemari oleh pembangun. Dalam bahasa Go, fungsi utama ialah fungsi masuk, dan setiap program Go mesti mengandungi fungsi utama sebagai titik masuk program. Artikel ini akan memperkenalkan cara mempelajari fungsi utama dalam bahasa Go dari awal dan memberikan contoh kod khusus. 1. Pertama, kita perlu memasang persekitaran pembangunan bahasa Go. Anda boleh pergi ke laman web rasmi (https://golang.org

Cepat belajar pemasangan pip dan kuasai kemahiran dari awal Cepat belajar pemasangan pip dan kuasai kemahiran dari awal Jan 16, 2024 am 10:30 AM

Pelajari pemasangan pip dari awal dan kuasai kemahiran dengan cepat Contoh kod khusus diperlukan: pip ialah alat pengurusan pakej Python yang boleh memasang, meningkatkan dan mengurus pakej Python dengan mudah. Bagi pembangun Python, adalah sangat penting untuk menguasai kemahiran menggunakan pip. Artikel ini akan memperkenalkan kaedah pemasangan pip dari awal, dan memberikan beberapa petua praktikal dan contoh kod khusus untuk membantu pembaca menguasai penggunaan pip dengan cepat. 1. Pasang pip Sebelum menggunakan pip, anda perlu memasang pip terlebih dahulu. pip

Fahami 20 papan pemuka analisis Dune ini dan tangkap arah aliran pada rantaian dengan cepat Fahami 20 papan pemuka analisis Dune ini dan tangkap arah aliran pada rantaian dengan cepat Mar 13, 2024 am 09:19 AM

Pengarang asal: Minty, penyulitan KOL Kompilasi asal: Shenchao TechFlow Jika anda tahu cara menggunakannya, Dune ialah alat alfa semua-dalam-satu. Bawa penyelidikan anda ke peringkat seterusnya dengan 20 papan pemuka Dune ini. 1. Analisis Pemegang Teratas Alat mudah yang dibangunkan oleh @dcfpascal ini boleh menganalisis token berdasarkan penunjuk seperti aktiviti bulanan pemegang, bilangan pemegang unik dan nisbah untung dan rugi dompet. Lawati pautan: https://dune.com/dcfpascal/token-holders2 Metrik Gambaran Keseluruhan Token @andrewhong5297 mencipta papan pemuka ini yang menyediakan cara untuk menilai token dengan menganalisis tindakan pengguna.

Pemahaman mendalam tentang cara menggunakan saluran paip Linux Pemahaman mendalam tentang cara menggunakan saluran paip Linux Feb 21, 2024 am 09:57 AM

Pemahaman mendalam tentang penggunaan paip Linux Dalam sistem pengendalian Linux, paip adalah fungsi yang sangat berguna yang boleh menggunakan output satu arahan sebagai input bagi arahan lain, dengan itu mudah merealisasikan pelbagai pemprosesan dan operasi data yang kompleks. Pemahaman mendalam tentang cara paip Linux digunakan adalah sangat penting untuk pentadbir dan pembangun sistem. Artikel ini akan memperkenalkan konsep asas saluran paip dan menunjukkan cara menggunakan saluran paip Linux untuk pemprosesan dan operasi data melalui contoh kod tertentu. 1. Konsep asas paip dalam Linux

See all articles