JavaScript中跨域問題的深入理解
前言:
學習javascript的童鞋都知道,我們在傳送網路請求,也就是我們在位址列輸入一個網址,就會自動跳轉到當前網址,比如在瀏覽器網址輸入www.baidu.com,瀏覽器就會自動跳轉到百度的的首頁 而瀏覽器傳送網路請求需要三和基本的要素
其實完整的url路徑應該是:http://www.baidu.com:80瀏覽器在傳送網路請求的時候回預設加上協議:http 和埠號80.
也www.cppcns.com就是完整的url至少 包含三個部分
1.http/https 傳輸協議
2.www.baidu.com 域名
3.80 埠號
因為有了這三個及基本要素,所以才有了所謂的跨域請求.那麼什麼是跨域請求呢,簡單的說,跨域就是[傳輸協議 / 域名 / 埠號]有一個或者多個不相等時,此時就會觸發瀏覽器的同源策略(同源,就是三者一樣,屬於同一源頭),也就是跨域請求
補充:
www.cppcns.com- 同源策略是由瀏覽器給的
瀏覽器不允許我們向別人傳送請求，只能向自己的伺服器傳送請求,當我們想向別人的伺服器傳送請求的時候，就會被瀏覽器阻止了
- 什麼是 “別人的伺服器” 呢？
當 請求協議/域名/埠號 有任意一個不同的時候，那麼就算是別人的伺服器這個時候就會觸發同源策略
瀏覽器阻止我們去跨域(偷瞄別人的伺服器),那我們自然也要大膽點,解決瀏覽器給的困難,也就是實現跨域請求.
在真實案例中,我們也會經常用到跨域請求,就比如我這個A網站,用到了B網站的美女圖片,比較好的方法就是向B網站的伺服器請求這些美女圖片,也就是A網需要B網的資料,一旦這樣子搞,就無形中形成了跨域請求.
**
那麼如何實現跨域請求呢?
**
方法一:jsonp
學習jsonp技術之前我們現在瞭解一下,當我們通過script標籤的src屬性引入檔案的時候,無論是什麼檔案型別,都會被解析成一段字串,然後當做js程式碼執行.於是就可以使用這個巧妙的方法來實現跨域請求了,下面看案例.
假設我這裡有一程式設計客棧個a.text檔案裡面有一句程式碼
alert('a')
我們去另一個網頁引用這個a.text這個檔案
頁面一開啟,彈出了a,說明a.text檔案中的程式碼被執行了
正是這樣,我們是設想 假如我們請求的是伺服器上的的檔案呢,也不需要考慮它是什麼字尾的,只要有返回值給我就行,那我在前端就可以拿到.於是,開始操作!
當我們去請求另一臺伺服器的資料時,比如!
http://10.36.136.96:80/ 是另一臺伺服器的地址
1.php 是另一臺伺服器上的檔案,我們正常去請求
在另一臺伺服器上由一個檔案叫 1.php
<script>
//http://10.36.136.96:80/是另一臺伺服器的地址
//1.php是另一臺伺服器上的檔案,我們正常去請求
var xhr = new XMLHttpRequest()
xhr.open('get','http://10.36.136.96:80/1.php')
xhr.onload = function () {
console.log(xhr.responseText);//1.php檔案將要返回的結果
}
xhr.send()
</script>
此時瀏覽器會報錯如下錯誤,也就是觸發了同源策略,出現了跨域請求
此時我們就可以用到上面說到的script標籤上的src屬性,我們程式設計客棧使用script去請求伺服器上的檔案
此時我們只要在json.html檔案上寫一行程式碼
<script src="http://10.36.136.96:80/1.php"></script>
可以看到瀏覽器沒有報錯,請求到了檔案,並且拿到了內容,那麼問題來了,我們怎麼去拿到返回的結果呢?
這裡就可以巧妙的運用一下回撥函式.
後端返回資料可以使用呼叫函式的方式來執行.
1.php檔案後端的程式碼為
<?php $_GET['callbac程式設計客棧k']; 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 的=號後面的就是回撥函式的名字,把它傳遞給1.php檔案,在1.php檔案就可以拿到這個,fn函式,呼叫傳入講到返回的資料,這樣就可以在前端通過函式呼叫的方式輕鬆拿到.
也就是說我們在前端定義了一個全域性函式,名為 fn 記住,一定是全域性的函式,函式名就是指向該函式的指標,把函式名傳過去,後端拿到了,進行一番操作後 返回的是fn(‘sanqian'),而這個結果就會被拿到前端,當做js程式碼執行.也就說上面的程式碼等價於下面的程式碼
<script>
function fn(data){
console.log(data);
}
</script>
<script>
fn('sanqian')
</script>
這樣一來就是上面定義,下面執行呼叫,如此一來,就拿到了後端返回的結果.
jsonp就是這麼一個原理和使用方法,目前使用也是較為廣泛的.要會的喔!
方法二: CROS
這是一個純後端的方法,和前端沒有任何關係.
當我們就真的傻乎乎去另一臺伺服器上請求資料的時候,瀏覽器就會有個經典的報錯如下:
翻譯一下就是
也就是訪問被幹掉了,我們需要吧請求的資源放在Access-Control-Allow-Origin標頭上,
那麼同樣要返回結果[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";
?>
沒錯就是加上這麼一行字,就可以正常請求到想要的資源了
當然也可以不止一行程式碼,還有一下的
//表明允許跨域訪問
header(Access-Control-Allow-Origin:上面origin的地址)//*號代表所有
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支援的http 動作
header('Access-Control-Allow-Headers:x-requested-with,content-type'); //響應頭 請按照自己需求新增
這個方法是跨域請求中最簡單的方法了吧,還是後端的活.
方法三:伺服器代理
proxy-代理
代理跨域(伺服器正向代理跨域)因為瀏覽器不允許請求一個非同源地址
在瀏覽器同源是何止一個代理伺服器
把本該傳送給目標伺服器的請求傳送給代理伺服器
由代理伺服器轉發請求給目標伺服器
目標伺服器把響應給代理伺服器
代理伺服器再把響應給瀏覽器
只要是伺服器就能進行代理,但是apache代理http的不需要花錢,https的需要花錢
而nginxhttp和https都是免費的,所以使用nginx代理,也用nginx演示
我們首先需要在nginx伺服器上配置好路徑
在配置檔案的
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 就是我們本機伺服器上要輸上去的路徑,當發現路徑是/sanqian時,伺服器就會發現,誒,原來你是想訪問http://10.36.136.96:80/1.php這個地址,然後代理的伺服器就去訪問這個地址,拿到訪問結果之後,在返回給當前去訪問該地址的瀏覽器,這樣就拿到了結果
以上就是我對跨域請求的一些簡單理解,可能寫的不全或者缺錯漏,如果發現,也請指出,謝謝!
總結
到此這篇關於javaScript中跨域問題的文章就介紹到這了,更多相關JavaScript跨域問題內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！