跨域（入門）

Shonim 發布于2019-08-26 11:49 / 1201人閱讀

摘要：跨域同源策略所謂同源，就是三個相同協議相同域名相同端口相同。同源策略的目的保證用戶信息的安全，防止惡意網站竊取數據。是的標準，全稱是跨域資源共享。是的一個，可以解決多窗口窗口和之間的消息通信的跨域問題。

JS跨域

同源策略

所謂“同源”，就是“三個相同”：協議相同、域名相同、端口相同。
同源策略的目的：保證用戶信息的安全，防止惡意網站竊取數據。
如果是非同源，共有三種行為會受到限制：
1.Cookie、LocalStorage、IndexDB無法讀取；
2.DOM無法獲取；（主要場景是ifame跨域的情況，不同域名的iframe是限制互相訪問的）
3.AJAX請求不能發送；

跨域的解決方法

跨域資源共享（CORS）

html5新增的標準，IE10以下不支持。
CORS是W3C的標準，全稱是跨域資源共享(Cross-Origin Resource sharing)。CORS定義了必須在訪問跨域資源時，瀏覽器與服務器應該如何溝通。它的思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是成功還是失敗。
使用：
對于前端，我們還是正常使用xhr對象發送ajax請求。唯一需要注意的是，我們需要設置xhr中的withCredentials為true，不然無法傳遞cookie，xhr.withCredentials=true;
對于服務端，需要在response header中設置如下兩個字段：
Access-Control-Allow-Origin:http://www.yourhost.com
Access-Control-Allow-Credentials:true

JSONP

JSONP的原理：在頁面上引入不同域上的js腳本文件是可以的，所以可以通過動態創建script標簽，然后利用src屬性進行跨域。通過將前端方法作為參數傳遞到服務器端，然后由服務器端注入參數之后再返回，實現服務器端向客戶端通信。

注：src請求都必須是get方法，就像你在瀏覽器地址欄輸入地址回車一樣。

function fun(fata){
    console.log(data);
}
var body=document.getElementsByTagName("body")[0];
var script=document.getElement("script");
script.type="text/javascript";
script.src="demo.js?callback=fun";
body.appendChild(script);
//返回的js腳本直接會執行，就執行已經定義好的fun函數，并且把數據傳入進來。
fun({"name":"name"})

CORS VS JSONP
都能解決ajax直接請求普通文件存在跨域無權訪問的問題
1.JSONP只能實現get請求，而CORS支持所有類型的http請求
2.使用CORS，開發者可以使用普通的XHR發起請求和獲得數據，比起JSONP有更好的錯誤處理
3.JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而現代瀏覽器都支持CORS

document.domain

修改document.domain的方法只適用于不同子域的框架間的交互。
對于主域名相同，而子域名不同的情況，可以使用document.domain來跨域這種方式非常適用于iframe跨域的情況，比如：
a頁面地址為?http://a.yourhost.com?
b頁面為?http://b.yourhost.com。
這樣就可以通過分別給兩個頁面設置 document.domain =?http://yourhost.com?來實現跨域。
之后，就可以通過 parent 或者 window["iframename"]等方式去拿到iframe的window對象了。

postMessage

postMessage是html5的一個API，可以解決多窗口、窗口和iframe之間的消息通信的跨域問題。
postmessage(data, origin)，其中data指的就是需要傳遞的數據，origin指的是具體的數據源地址(包括協議+域名+端口)。然后window對message事件進行監聽。





document.getElementById("send").onclick = function() {
    var msg = document.getElementById("msg").value;
    var iframeWindow = document.getElementById("iframe").contentWindow;
    iframeWindow.postMessage(msg,"http://next.com/next.html");
}


    以下是接收到的消息：
    
         
    


window.addEventListnerner("message",handle,false){//window對message時間監聽
}
function handle(event){
    if(event.origin==="http://source.com"){
        document.getElementById("msg").innerHTML=event.data;
    }
}

云服務器 GPU云服務器端跨域跨域 cdn跨域 SONP跨域

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

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

用本地運行的demo快速入門跨域

摘要：學習建議在學習其中一種跨域方法的時候，建議邊運行項目里的，邊在網上搜索博客文章學習這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網上有很多文章詳細講述跨域知識，只是少了可以本地運行的，所以這里就不再贅述跨域知識。前言因為學習跨域需要配置本地服務器，可能會比較麻煩，所以自己根據網上的博客寫了大多數跨域的簡單demo，可以自己在本地運行，而且不用配置服務器。自己對于跨域的理解剛開始...

yy736044583 2019-08-20 17:19 評論0 收藏0
用本地運行的demo快速入門跨域

摘要：學習建議在學習其中一種跨域方法的時候，建議邊運行項目里的，邊在網上搜索博客文章學習這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網上有很多文章詳細講述跨域知識，只是少了可以本地運行的，所以這里就不再贅述跨域知識。前言因為學習跨域需要配置本地服務器，可能會比較麻煩，所以自己根據網上的博客寫了大多數跨域的簡單demo，可以自己在本地運行，而且不用配置服務器。自己對于跨域的理解剛開始...

GraphQuery 2019-08-29 12:48 評論0 收藏0
用本地運行的demo快速入門跨域

摘要：學習建議在學習其中一種跨域方法的時候，建議邊運行項目里的，邊在網上搜索博客文章學習這種跨域方法，這樣有助于快速并且深入理解跨域。鑒于網上有很多文章詳細講述跨域知識，只是少了可以本地運行的，所以這里就不再贅述跨域知識。前言因為學習跨域需要配置本地服務器，可能會比較麻煩，所以自己根據網上的博客寫了大多數跨域的簡單demo，可以自己在本地運行，而且不用配置服務器。自己對于跨域的理解剛開始...

Integ 2019-08-01 17:00 評論0 收藏0
Nginx入門及如何反向代理解決生產環境跨域問題

摘要：還是回到萬能的文件，添加匹配規則實現代理轉發設置代理轉發通過上面的設置，在重啟服務，可以讓頁面中所有包含字段的請求都轉為由服務器去向地址發送請求，從而巧妙的解決了瀏覽器的跨域問題。 1.Nginx入門與基本操作篇注：由于服務器是windows系統，所以本文主要講解Nginx在windows下的操作。首先下載Nginx 解壓縮，我們所有的配置基本都在萬能的 nginx/conf/...

Moxmi 2019-07-25 14:38 評論0 收藏0
服務器部署工具 - 收藏集 - 掘金

摘要：基本入門前端掘金作者本文屬于翻譯文章，原文鏈接為。如果如何把應用放在容器中運行掘金本文適合零基礎，且希望使用運行應用的人士。后端掘金使用構建網站。 nginx 基本入門 - 前端 - 掘金作者：villainthr 本文屬于翻譯文章，原文鏈接為 nginx Beginner’s Guide。是至今為止見過最好的 nginx 入門文章。額。。。沒有之一。這篇教程簡單介紹了 nginx ...

Shonim 2019-07-25 13:56 評論0 收藏0