国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關于跨域

CoreDump / 879人閱讀

摘要:經歷了幾場筆試面試,屢次被問到關于如何實現跨域。轉自個人博客關于跨域什么是跨域一般來說,如果你在開發中需要進行跨域操作從一個非同源網站發送請求獲取數據,一般而言,你在瀏覽器控制臺看到的結果為同源策略說到跨域就不得不提同源策略。

前言

轉眼就是秋招季啦。經歷了幾場筆試面試,屢次被問到關于如何實現跨域。老實說,之前都是紙上談兵,也沒有項目需要跨域,甚至覺得這個東西沒什么意義。直到今天項目中遇到了跨域問題,看了不少資料才理解跨域的普遍性和意義。特寫此篇文章整理自己所得。
轉自個人博客: 關于跨域

什么是跨域

一般來說,如果你在開發中需要進行跨域操作(從一個非同源網站發送請求獲取數據),一般而言,你在瀏覽器控制臺看到的結果為:

XMLHttpRequest cannot load http://external-domain/service. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://my-domain’ is therefore not allowed access.

同源策略

說到跨域就不得不提“同源策略”。
同源策略是Web瀏覽器針對惡意的代碼所進行的措施,為了防止世界被破壞,為了保護世界的和平,Web瀏覽器,采取了同源策略,只允許腳本讀取和所屬文檔來源相同的窗口和文檔的屬性。
那么,怎么判斷文檔來源是否相同呢?很簡單,看三個部分: 協議、主機、端口號。只要其中一個部分不同,則不同源。

跨域的應用場景

來自 home.example.com 的文檔里的腳本讀取 developer.example.com載入的文檔的屬性。

來自 home.example.com 的文檔里的腳本讀取 text.segmentfault.com載入的文檔的屬性

如何跨域 設置domain屬性

針對上述應用場景的第一種情況,可以設置Document對象的domain屬性。但是設置時使用的字符串必須具有有效的域前綴或者它本身。
PS: domain值中必須有一個點號。
PS: domain不能由松散的變為緊繃的。

//初始值 "home.example.com" 
document.domain = "example.com"; //OK
document.domain = "home.example.com"; //NO,不能由松散變緊繃
document.domain = "example"; //NO,必須有一個點號
document.domain = "another.com"; //NO, 必須是有效域前綴或其本身
JSONP

JSONP由兩部分組成: 回調函數和數據。
原理:通過動態

某些API(例如Github API)允許你定義一個回調函數,當請求返回時執行該函數。

function logResults(json){
  console.log(json);
}

$.ajax({
  url: "https://api.github.com/users/jeresig",
  dataType: "jsonp",
  jsonpCallback: "logResults"
});

運行結果如下:

優點:

兼容性強。

簡單易用,能之間訪問響應文本,支持瀏覽器與服務器之間雙向通信。

不足:

只能用GET方法,不能使用POST方法

無法判斷請求是否失敗,沒有錯誤處理。

跨域資源共享CORS

需要瀏覽器和服務器同時支持。
原理:使用"Origin:"請求頭和"Access-Control-Allow-Origin"響應頭來擴展HTTP。其實就是利用新的HTTP頭部來進行瀏覽器與服務器之間的溝通。

針對前端代碼而言,變化的地方在于相對路徑需改為絕對路徑。

//以前的方式
var xhr = new XMLHttpRequest(); 
xhr.open("GET", "/test", true); 
xhr.send(); 
//CORS方式
var xhr = new XMLHttpRequest(); 
xhr.open("GET", "http://segmentfault.com/test", true); 
xhr.send(); 

針對服務器代碼而言,需要設置Access-Control-Allow-Origin,顯式地列出源或使用通配符來匹配所有源。

優點:

CORS支持所有類型的HTTP請求。

使用CORS,開發者可以使用普通的XMLHttpRequest發起請求和獲得數據

不足:

不能發送和接收cookie
更新:服務端可以通過設置Access-Control-Allow-Credentials該字段來表示是否允許發送Cookie。發送ajax請求時,需配置withCredentials屬性。(感謝sf小伙伴@lloyd_zhou 指正) 具體可查看 阮一峰大大的博客。

不能使用setRequestHeader()設置自定義頭部

兼容IE10+

postMessage

postMessge()是HTML5新定義的通信機制。所有主流瀏覽器都已實現。該API定義在Window對象。

otherWindow.postMessage(message, targetOrigin);

message: 要傳遞的消息。
targetOrigin: 指定目標窗口的源。在發送消息的時候,如果目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值,那么消息就不會被發送;只有三者完全匹配,消息才會被發送。這個機制用來控制消息可以發送到哪些窗口;

當源匹配時,調用postMessage()方法時,目標窗口的Window對象會觸發一個message事件。在進行監聽事件時,應先判斷origin屬性,忽略來自未知源的消息。

//上的腳本:
var popup = window.open(...popup details...);
popup.postMessage("The user is "bob" and the password is "secret"",
              "https://secure.example.net");  
popup.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
  if (event.origin !== "http://example.org")
    return;
  // event.source is popup
  // event.data is "hi there yourself!  the secret response is: rheeeeet!"【見下面一段代碼可知】
}
window.addEventListener("message", receiveMessage, false);

針對上面的腳本進行接受數據的操作:

/*
 * popup的腳本,運行在:
 */

//當postMessage后觸發的監聽事件
function receiveMessage(event)
{
  //先判斷源
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source:window.opener
  // event.data:"hello there!"

  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

window.addEventListener("message", receiveMessage, false);
     
后續

收到了很多小伙伴的建議和指正,不勝感激,我會慢慢豐富這篇文章的內容的。請多多指教~

參考文章

前端跨域請求原理及實踐

Window.postMessage()|MDN

老生常談的跨域處理

JavaScript跨域問題總結

實現跨域的幾種方式

jQuery’s JSONP Explained with Examples

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87910.html

相關文章

  • 關于跨域

    摘要:服務端接收到請求后,通過該參數獲得回調函數名,并將數據放在參數中將其返回收到結果后因為是標簽,所以瀏覽器會當做是腳本進行運行,從而達到跨域獲取數據的目的。 在使用Vue搭建的一個后端管理系統中,我使用axios請求本地的Node環境下的接口,但是請求失敗,然后我錯誤信息是:showImg(https://segmentfault.com/img/remote/1460000018521...

    AlexTuan 評論0 收藏0
  • 20K前端大佬面試(關于如何回答ajax跨域問題)

    摘要:在接觸前端開發起,跨域這個詞就一直以很高的頻率在我們學習工作中重復出現,最近在工作中遇到了跨域的相關問題,這里我把它總結記錄一下。 在接觸前端開發起,跨域這個詞就一直以很高的頻率在我們學習工作中重復出現,最近在工作中遇到了跨域的相關問題,這里我把它總結記錄一下。關于跨域,有N種類型,現在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹),內容...

    Yangyang 評論0 收藏0
  • 關于跨域踩的坑,瀏覽器 status code為200,但實際上是跨域

    摘要:背景后端使用并更改本地文件,起本地服務。使用調用后端接口,要求為格式,并要求在里加一些內容。借用凝雨關于跨域踩坑經驗總結 背景 后端使用Nginx并更改本地host文件,起本地服務。將aaa.bbbb.com代理至本地IP地址(10.26.36.156)。使用$.ajax調用后端restful接口,要求content-type為application/json格式,并要求在reques...

    neu 評論0 收藏0
  • 關于vue-resource在dev環境下跨域問題的解決方法

    摘要:跨域問題相信跨域問題是每個前端在請求中都會遇到的問題因為瀏覽器的同源策略的限制所以是不支持跨域的當然當后臺在沒有完成搭建的時候這時候我們需要使用到模擬數據的時候這時候很多的就會出現跨域問題在中當然這個問題也不例外如下所以在此我也就整理出了 跨域問題 相信跨域問題是每個前端在ajax請求中都會遇到的問題,因為瀏覽器的同源策略的限制,所以ajax是不支持跨域的,當然當后臺在沒有完成搭建的...

    timger 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<