跨域

morgan 發(fā)布于2019-08-20 17:38 / 569人閱讀

摘要：一同源策略同源協(xié)議，域名，端口三者都相同視為同源。同源策略主要是出于安全的考慮。不受同源策略限制的跨域資源寫入。優(yōu)點所有的瀏覽器都支持是解決該問題的終極方案四跨域數(shù)據(jù)存儲訪問受限情況存儲在瀏覽器中的數(shù)據(jù)，如和，以源進行分割。

一、同源策略（Same-Origin Policy） 1.1 同源（Same Origin）

協(xié)議，域名，端口三者都相同視為同源。同源策略主要是出于安全的考慮。一個源不能訪問另一個源的DOM，客戶端數(shù)據(jù)，發(fā)生Ajax請求。

1.2 不受同源策略限制的

跨域資源寫入。

報錯：

2.2 window.postMessage 2.2.1 介紹

Html5中引入了一個新的API： window.postMessage，可以安全的使不同源文檔通信。
分別修改A，B頁面內(nèi)容
A頁面：



    
        Index

B頁面：



    
         Detail
    
    
        Detail

顯示：

2.2.2 優(yōu)點

A：安全
B：可以傳輸任何數(shù)據(jù)類型

2.2.3 缺點

A：這是html5的API，存在兼容性問題。

三、跨域Ajax請求 3.1 受限情況

Ajax請求只能想同源的地址發(fā)生請求，否則就報錯。

處理這類情況是可通過JSONP，CORS方式解決。

3.2 JSONP

參考：

CSDN：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/index.html

JSONP其實是解決異步跨域請求的問題，跟AJAX半毛錢關(guān)系都沒有。

3.2.1 原理

script標(biāo)簽不受同源策略約束，即src屬性的值可以是非同源地址。把請求的接口地址和參數(shù)通過URL的方式添加到一個script標(biāo)簽的src屬性上，接口處理完成后返回個JS函數(shù)調(diào)用語句字符串。這樣就實現(xiàn)了異步跨域請求接口。

3.2.2 怎么做

A：Client端script標(biāo)簽的src屬性指向服務(wù)的地址
B：服務(wù)端返回JS回調(diào)函數(shù)調(diào)用語句的字符串?；卣{(diào)函數(shù)名一般是客戶端傳過來的，或者前后端約定的回調(diào)函數(shù)名。

3.2.3 缺點

A：只支持GET請求。

3.2.4 優(yōu)點

A：所有的瀏覽器都支持

3.3 CORS

CORS是解決該問題的終極方案

四、跨域數(shù)據(jù)存儲訪問 4.1 受限情況

存儲在瀏覽器中的數(shù)據(jù)，如localStorage和IndexedDB，以源進行分割。每個源都擁有自己多帶帶的存儲空間，一個源中的Javascript腳本不能對屬于其它源的數(shù)據(jù)進行讀寫操作。
處理這種情況是可通過window.postMessage方式解決。

4.2 window.postMessage

postMessage實現(xiàn)了兩個不同源的頁面間通信，可以用來解決跨域數(shù)據(jù)訪問問題。

4.3 特殊的Cookie

Cookie關(guān)于源的定義不同，參考C_Cookie。

GPU云服務(wù)器云服務(wù)器端跨域跨域 cdn跨域 SONP跨域

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83734.html

相關(guān)文章

ajax跨域，這應(yīng)該是最全的解決方案了

摘要：關(guān)于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現(xiàn)原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。前言從剛接觸前端開發(fā)起，跨域這個詞就一直以很高的頻率在身邊重復(fù)出現(xiàn)，一直到現(xiàn)在，已經(jīng)調(diào)試過N個跨域相關(guān)的問題了，16年時也整理過一篇相關(guān)文章，但是感覺還是差了點什么，于是現(xiàn)在重新梳理了一下。個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

ytwman 2019-08-22 11:21 評論0 收藏0
大話javascript 5期：跨域

摘要：同源策略所謂同源是指協(xié)議，域名，端口均相同。同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方資源。需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當(dāng)前頁。一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）統(tǒng)一資源定位符（URL）是用于完整地描述Internet上網(wǎng)頁和其他資源的地址的...

jzzlee 2019-08-23 16:42 評論0 收藏0
用本地運行的demo快速入門跨域

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

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

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

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

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

Integ 2019-08-01 17:00 評論0 收藏0
javascript跨域

摘要：實現(xiàn)跨域的原理通過方式請求載入并執(zhí)行一個文件，相當(dāng)于通過的形式的導(dǎo)入一個外部的方法語法該函數(shù)是簡寫的函數(shù)，等價于在中，您可以通過使用形式的回調(diào)函數(shù)來加載其他網(wǎng)域的數(shù)據(jù)，如。將自動替換為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。更多詳情見http://blog.zhangbing.club/Ja... 最近在項目開發(fā)的過程中遇到一些Javascript 跨域請求的問題，今天抽空對其進行總結(jié)一下，以...

PingCAP 2019-08-22 18:10 評論0 收藏0