首先我們來想一想

為什么會(huì)有跨域這個(gè)名詞的出現(xiàn)呢?

跨域又是什么呢?為何要跨域?

瀏覽器的同源策略又是什么?怎么解決?

jsonp又是什么?

跨域的原理又是什么呢?

名詞解釋:

跨域:

瀏覽器對于javascript的同源策略的限制,例如a.cn下面的js不能調(diào)用b.cn中的js,對象或數(shù)據(jù)(因?yàn)閍.cn和b.cn是不同域),所以跨域就出現(xiàn)了.

上面提到的,同域的概念又是什么呢??? 簡單的解釋就是相同域名,端口相同,協(xié)議相同

同源策略:

請求的url地址,必須與瀏覽器上的url地址處于同域上,也就是域名,端口,協(xié)議相同.

比如:我在本地上的域名是study.cn,請求另外一個(gè)域名一段數(shù)據(jù)

這個(gè)時(shí)候在瀏覽器上會(huì)報(bào)錯(cuò):

這個(gè)就是同源策略的保護(hù),如果瀏覽器對javascript沒有同源策略的保護(hù),那么一些重要的機(jī)密網(wǎng)站將會(huì)很危險(xiǎn)~

study.cn/json/jsonp/jsonp.html

請求地址

形式

結(jié)果

http://study.cn/test/a.html

同一域名,不同文件夾

成功

http://study.cn/json/jsonp/jsonp.html

同一域名,統(tǒng)一文件夾

成功

http://a.study.cn/json/jsonp/jsonp.html

不同域名,文件路徑相同

失敗

http://study.cn:8080/json/jsonp/jsonp.html

同一域名,不同端口

失敗

https://study.cn/json/jsonp/jsonp.html

同一域名,不同協(xié)議

失敗

jsonp:

jsonp?全稱是JSON with Padding,是為了解決跨域請求資源而產(chǎn)生的解決方案,是一種依靠開發(fā)人員創(chuàng)造出的一種非官方跨域數(shù)據(jù)交互協(xié)議。

一個(gè)是描述信息的格式，一個(gè)是信息傳遞雙方約定的方法。

jsonp的產(chǎn)生:

1.AJAX直接請求普通文件存在跨域無權(quán)限訪問的問題,不管是靜態(tài)頁面也好.

2.不過我們在調(diào)用js文件的時(shí)候又不受跨域影響,比如引入jquery框架的,或者是調(diào)用相片的時(shí)候

3.凡是擁有scr這個(gè)屬性的標(biāo)簽都可以跨域例如

4.如果想通過純web端跨域訪問數(shù)據(jù)只有一種可能,那就是把遠(yuǎn)程服務(wù)器上的數(shù)據(jù)裝進(jìn)js格式的文件里.

5.而json又是一個(gè)輕量級的數(shù)據(jù)格式,還被js原生支持

6.為了便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback?參數(shù)給服務(wù)端，

demo1:基于script標(biāo)簽實(shí)現(xiàn)跨域

舉個(gè)例子:我在http://study.cn/json/jsonp/jsonp_2.html下請求一個(gè)遠(yuǎn)程的js文件

1

2

3

4

5

Insert title here

6

7

8 var message = function(data) {

9 alert(data[1].title);

10 };

11

12

13

14

15

16

17

18

總結(jié)

以上是生活随笔為你收集整理的跨域会报40几_关于跨域,以及跨域的几种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。