快捷導(dǎo)航

JavaScript中跨域問題的深入理解

更新時(shí)間：2021年03月04日 10:32:14 作者：三七安

這篇文章主要給大家介紹了關(guān)于JavaScript中跨域問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言:

學(xué)習(xí)JavaScript的童鞋都知道,我們?cè)诎l(fā)送網(wǎng)絡(luò)請(qǐng)求,也就是我們?cè)诘刂窓谳斎胍粋€(gè)網(wǎng)址,就會(huì)自動(dòng)跳轉(zhuǎn)到當(dāng)前網(wǎng)址,比如在瀏覽器網(wǎng)址輸入www.baidu.com,瀏覽器就會(huì)自動(dòng)跳轉(zhuǎn)到百度的的首頁而瀏覽器發(fā)送網(wǎng)絡(luò)請(qǐng)求需要三和基本的要素

其實(shí)完整的url路徑應(yīng)該是:http://www.baidu.com:80瀏覽器在發(fā)送網(wǎng)絡(luò)請(qǐng)求的時(shí)候回默認(rèn)加上協(xié)議:http 和端口號(hào)80.
也就是完整的url至少包含三個(gè)部分

1.http/https 傳輸協(xié)議

2.www.baidu.com 域名

3.80 端口號(hào)

因?yàn)橛辛诉@三個(gè)及基本要素,所以才有了所謂的跨域請(qǐng)求.那么什么是跨域請(qǐng)求呢,簡單的說,跨域就是[傳輸協(xié)議 / 域名 / 端口號(hào)]有一個(gè)或者多個(gè)不相等時(shí),此時(shí)就會(huì)觸發(fā)瀏覽器的同源策略(同源,就是三者一樣,屬于同一源頭),也就是跨域請(qǐng)求

補(bǔ)充:

- 同源策略是由瀏覽器給的

瀏覽器不允許我們向別人發(fā)送請(qǐng)求，只能向自己的服務(wù)器發(fā)送請(qǐng)求,當(dāng)我們想向別人的服務(wù)器發(fā)送請(qǐng)求的時(shí)候，就會(huì)被瀏覽器阻止了

- 什么是 “別人的服務(wù)器” 呢？

當(dāng) 請(qǐng)求協(xié)議/域名/端口號(hào) 有任意一個(gè)不同的時(shí)候，那么就算是別人的服務(wù)器這個(gè)時(shí)候就會(huì)觸發(fā)同源策略

瀏覽器阻止我們?nèi)タ缬?偷瞄別人的服務(wù)器),那我們自然也要大膽點(diǎn),解決瀏覽器給的困難,也就是實(shí)現(xiàn)跨域請(qǐng)求.

在真實(shí)案例中,我們也會(huì)經(jīng)常用到跨域請(qǐng)求,就比如我這個(gè)A網(wǎng)站,用到了B網(wǎng)站的美女圖片,比較好的方法就是向B網(wǎng)站的服務(wù)器請(qǐng)求這些美女圖片,也就是A網(wǎng)需要B網(wǎng)的數(shù)據(jù),一旦這樣子搞,就無形中形成了跨域請(qǐng)求.

**

那么如何實(shí)現(xiàn)跨域請(qǐng)求呢?

**

方法一:jsonp

學(xué)習(xí)jsonp技術(shù)之前我們現(xiàn)在了解一下,當(dāng)我們通過script標(biāo)簽的src屬性引入文件的時(shí)候,無論是什么文件類型,都會(huì)被解析成一段字符串,然后當(dāng)做js代碼執(zhí)行.于是就可以使用這個(gè)巧妙的方法來實(shí)現(xiàn)跨域請(qǐng)求了,下面看案例.

假設(shè)我這里有一個(gè)a.text文件里面有一句代碼

alert('a')

我們?nèi)チ硪粋€(gè)網(wǎng)頁引用這個(gè)a.text這個(gè)文件

頁面一打開,彈出了a ,說明a.text文件中的代碼被執(zhí)行了

正是這樣,我們是設(shè)想假如我們請(qǐng)求的是服務(wù)器上的的文件呢,也不需要考慮它是什么后綴的,只要有返回值給我就行,那我在前端就可以拿到.于是,開始操作!

當(dāng)我們?nèi)フ?qǐng)求另一臺(tái)服務(wù)器的數(shù)據(jù)時(shí),比如!

http://10.36.136.96:80/ 是另一臺(tái)服務(wù)器的地址

1.php 是另一臺(tái)服務(wù)器上的文件,我們正常去請(qǐng)求

在另一臺(tái)服務(wù)器上由一個(gè)文件叫 1.php

 <script>
 //http://10.36.136.96:80/是另一臺(tái)服務(wù)器的地址
 //1.php是另一臺(tái)服務(wù)器上的文件,我們正常去請(qǐng)求

 var xhr = new XMLHttpRequest()
 xhr.open('get','http://10.36.136.96:80/1.php')
 xhr.onload = function () { 
 console.log(xhr.responseText);//1.php文件將要返回的結(jié)果
 }
 xhr.send()
 </script>

此時(shí)瀏覽器會(huì)報(bào)錯(cuò)如下錯(cuò)誤,也就是觸發(fā)了同源策略,出現(xiàn)了跨域請(qǐng)求

此時(shí)我們就可以用到上面說到的script標(biāo)簽上的src屬性,我們使用script去請(qǐng)求服務(wù)器上的文件

此時(shí)我們只要在json.html文件上寫一行代碼

 <script src="http://10.36.136.96:80/1.php"></script>

可以看到瀏覽器沒有報(bào)錯(cuò),請(qǐng)求到了文件,并且拿到了內(nèi)容,那么問題來了,我們?cè)趺慈ツ玫椒祷氐慕Y(jié)果呢?

這里就可以巧妙的運(yùn)用一下回調(diào)函數(shù).

后端返回?cái)?shù)據(jù)可以使用調(diào)用函數(shù)的方式來執(zhí)行.

1.php文件后端的代碼為

<?php

 $_GET['callback'];
 echo "$name('sanqian')";

?>

jsop.html文件前端代碼為:

<script>
 function fn(data){
  console.log(data);
 }
 </script>
 <script src="http://10.36.136.96:80/1.php?callback=fn"></script>

callback 的=號(hào)后面的就是回調(diào)函數(shù)的名字,把它傳遞給1.php文件,在1.php文件就可以拿到這個(gè),fn函數(shù),調(diào)用傳入講到返回的數(shù)據(jù),這樣就可以在前端通過函數(shù)調(diào)用的方式輕松拿到.

也就是說我們?cè)谇岸硕x了一個(gè)全局函數(shù),名為 fn 記住,一定是全局的函數(shù), 函數(shù)名就是指向該函數(shù)的指針, 把函數(shù)名傳過去, 后端拿到了,進(jìn)行一番操作后返回的是fn(‘sanqian'),而這個(gè)結(jié)果就會(huì)被拿到前端,當(dāng)做js代碼執(zhí)行.也就說上面的代碼等價(jià)于下面的代碼

 <script>
 function fn(data){
  console.log(data);
 }
 </script>
 <script>
 fn('sanqian')
 </script>

這樣一來就是上面定義,下面執(zhí)行調(diào)用,如此一來,就拿到了后端返回的結(jié)果.

jsonp就是這么一個(gè)原理和使用方法,目前使用也是較為廣泛的.要會(huì)的喔!

方法二: CROS

這是一個(gè)純后端的方法,和前端沒有任何關(guān)系.

當(dāng)我們就真的傻乎乎去另一臺(tái)服務(wù)器上請(qǐng)求數(shù)據(jù)的時(shí)候,瀏覽器就會(huì)有個(gè)經(jīng)典的報(bào)錯(cuò)如下:

翻譯一下就是

也就是訪問被干掉了,我們需要吧請(qǐng)求的資源放在Access-Control-Allow-Origin標(biāo)頭上,

那么同樣要返回結(jié)果[sanqian] , 然后我們的前后端代碼就變成了下面這樣

jsonp.html文件

 <script>
 var xhr = new XMLHttpRequest()
 xhr.open('get','http://10.36.136.96:80/1.php')
 xhr.onload = function () { 
  console.log(xhr.responseText);
  }
  xhr.send()

1.php文件

<?php
 header('Access-Control-Allow-Origin:*');
 echo "sanqian";
?>

沒錯(cuò)就是加上這么一行字,就可以正常請(qǐng)求到想要的資源了

當(dāng)然也可以不止一行代碼,還有一下的

//表明允許跨域訪問
header(Access-Control-Allow-Origin:上面origin的地址)//*號(hào)代表所有
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 動(dòng)作
header('Access-Control-Allow-Headers:x-requested-with,content-type'); //響應(yīng)頭 請(qǐng)按照自己需求添加

這個(gè)方法是跨域請(qǐng)求中最簡單的方法了吧,還是后端的活.

方法三:服務(wù)器代理

proxy-代理

代理跨域(服務(wù)器正向代理跨域)因?yàn)闉g覽器不允許請(qǐng)求一個(gè)非同源地址

        在瀏覽器同源是何止一個(gè)代理服務(wù)器
        把本該發(fā)送給目標(biāo)服務(wù)器的請(qǐng)求發(fā)送給代理服務(wù)器
        由代理服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求給目標(biāo)服務(wù)器
        目標(biāo)服務(wù)器把響應(yīng)給代理服務(wù)器
        代理服務(wù)器再把響應(yīng)給瀏覽器

只要是服務(wù)器就能進(jìn)行代理,但是apache代理http的不需要花錢, https的需要花錢

而nginxhttp和https都是免費(fèi)的,所以使用nginx代理,也用nginx演示

我們首先需要在nginx服務(wù)器上配置好路徑

在配置文件的

servr{}里面

serve{
...
location = /sanqian {
	proxy_pass http://10.36.136.96:80/1.php;
	}
...
}

配置好之后,jsonp.html文件的代碼就變成了

 <script>
 var xhr = new XMLHttpRequest()
 xhr.open('get','/sanqian') // 注意這里變了
 xhr.onload = function () { 
  console.log(xhr.responseText);
  }
  xhr.send()
 </script>

1.php文件代碼變成了

<?php 
 echo "sanqian";
?>

/sanqian 就是我們本機(jī)服務(wù)器上要輸上去的路徑,當(dāng)發(fā)現(xiàn)路徑是/sanqian時(shí),服務(wù)器就會(huì)發(fā)現(xiàn),誒,原來你是想訪問http://10.36.136.96:80/1.php這個(gè)地址,然后代理的服務(wù)器就去訪問這個(gè)地址,拿到訪問結(jié)果之后,在返回給當(dāng)前去訪問該地址的瀏覽器,這樣就拿到了結(jié)果