首頁 >web前端 >js教程 >js中的跨域問題

js中的跨域問題

不言原創: 2018-04-10 13:48:101234瀏覽

本篇文章介紹的內容是關於js的跨域問題，現在分享給大家，有需要的朋友可以參考一下

##範例程式碼在E/AjaxGGW/跨域問題，參考書籤掘金（正確面對跨域，別慌）

1. 跨網域：瀏覽器無法執行其他網站的腳本。它是由瀏覽器的同源#策略造成的，是瀏覽器對JavaScript實作的安全性限制

2. #同源策略限制了下列行為：

Cookie、LocalStorage和IndexDB無法讀取
DOM和JS物件無法取得
#Ajax請求發送不出去

3. 常見的跨域場景
##同源：網域、協定、連接埠皆相同

呼叫 http://www.nealyang.cn/server.php 非跨域
http://www.nealyang.cn/index.html
呼叫 # http://www.neal.cn/server.php 跨領域,主域不同
http://abc.nealyang.cn/index.html
呼叫 http://def.neal.cn/server.php 跨域,子網域不同
# http:/ /www.nealyang.cn/server.php ##跨域,連接埠不同##https://www.nealyang. cn/index.html
http://www.nealyang.cn/server.php
跨域,協定不同
4.

跨領域的解決方案##1）jsonp跨域

在html頁面中透過對應的標籤從不同的網域下載入靜態資源檔案是被瀏覽器允許的。一般，我們可以動態的建立script標籤，再去請求一個帶參網址來實作跨域通訊。

但是，最大的缺陷是，只能實作get請求

$(function(){
/*jQuery支持jsonp的实现方式  */
$.ajax({
url:"www.baidu.com",
type:"GET",
dataType:"jsonp",  //请求方式为：jsonp
jsonpCallback:"callback",
data:{
"username":"yaofan"
}
})
})

2）document.domain iframe跨域(1.html和document.domain iframe跨域.html##)

最主要的要求是主網域相同,需要兩個html頁面

<!-- 这种方式最主要的要求是主域名相同,假设目前a.nealyang.cn和b.nealyang.cn分别对应指定不同的ip服务器
a.nealyang.cn下有一个test.html文件
b.nealyang.cn下有一个1.html文件
  -->
 <p>A页面</p> 
 <!-- 利用iframe加载其他域下的文件 ，src中 -->
<iframestyle = "display:none" name = "iframe1" id = "iframe" src = "http://b.nealyang.cn/1.html" frameborder = "0">
     </iframe>  
     <script type="text/javascript">
     $(function(){
     try{
     document.domain = "nealyang.cn" //将document.domain设置为nealyang.cn，当iframe加载完毕后就可以获取nealyang.cn域下的全局对象
     }catch(e){
     $("#iframe").load(function(){
   var jq = document.getElementById("iframe").contentWindow.$; 
    jq.get("http://nealyang.cn/test.json",function(data){
     console.log(data);
     });
     })
     }
     })
     </script>

#3）window.name iframe跨域（origin.html和target.html 不是掘金裡的）

#window.name屬性可設定或傳回存放視窗名稱的一個字串。她的神奇之處在於，name值在不同頁面或不同網域下載入依舊存在，沒有修改就不會改變，並且可以儲存非常長的name（2MB）

假設index頁面請求遠端伺服器上的數據，我們在該頁面下建立iframe標籤，該iframe的src指向伺服器檔案的位址（iframe標籤src可以跨網域），伺服器檔案中設定好window .name的值，然後在index.html裡面讀取該iframe中的window.name的值

#如果index.html頁面和該頁面裡的iframe框架的src如果不同來源，則無法操作框架裡的任何東西。兩個頁面處於不同網域，來源頁面並不能獲得目標頁面的name值，因為name值只對同一個網域中的頁面是可見的。

4）Location.hash iframe跨域

##此跨域方法和上面介紹的比較類似，一樣是動態插入一個iframe然後設定其src為服務端位址，而服務端同樣輸出一端js程式碼，也同時透過與子視窗的通訊來完成資料的傳輸。

而location.hash其實就是url的錨點，例如http://www.nealyang.cn#Nealyang的網址開啟後，在控制台輸入location.hash就會回傳#Nealyang的欄位。

【註】其實location.hash和window.hash都是差不多，都是利用全域物件屬性的方法，然後這兩種方法和jsop也是一樣的，就是只能實作get請求

<script type="text/javascript">
function getData(url,fn){
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = url;
iframe.onload = function(){
fn(iframe.contentWindow.location.hash.substring(1));
window.location.hash = "";
document.body.removeChild(iframe);
};
document.body.removeChild(iframe);
}
//get data from server
var url = "http://localhost:8080/data.php";
getData(url,function(data){
var jsondata = JSON.parse(data);
console.log(jsondata.name + "" +jsondata.age);
});
</script>

5）

postMessage跨域(##a.html 和b.html )

這是由

H5提出來的一個酷炫的API，包括發送訊息的postMessage方法和接受訊息的Message時間。

① 发送信息的postMessage方法是向外界窗口发送信息

otherWindow.postMessage(message,targetOrigin);

l otherWindow指的是目标窗口，是window.frames属性的成员或者是window.open方法创建的窗口。

l Message是要发送的消息，类型是String、Object

l targetOringin是限定消息接收范围，不限制用星号*

② 接受信息的message事件

var onmessage = function(event){
var data = event.data;
var origin = event.origin;
}
if(typeof window.addEventListener != &#39;undefined&#39;){
    window.addEventListener(&#39;message&#39;,onmessage,false);
}else if(typeof window.attachEvent != &#39;undefined&#39;){
    window.attachEvent(&#39;onmessage&#39;, onmessage);
}

6) 跨域资源共享CORS

目前主流的跨域解决方案

1）简介

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而客服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

js中的跨域問題

##範例程式碼在E/AjaxGGW/跨域問題，參考書籤掘金（正確面對跨域，別慌）

相關文章