跨域的原因
瀏覽器出于安全方面的考慮捷枯，只允許與本域下的接口交互蹄衷。不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方的資源虎忌。
需要注意的是: 對于當(dāng)前頁面來說頁面存放的 JS 文件的域不重要归粉，重要的是加載該 JS 頁面所在什么域
跨域的幾種方法
-
JSOP
JSONP是通過 script 標(biāo)簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù)當(dāng)做 JS 代碼來執(zhí)行 提前在頁面上聲明一個(gè)函數(shù)椿疗，函數(shù)名通過接口傳參的方式傳給后臺，后臺解析到函數(shù)名后在原始數(shù)據(jù)上「包裹」這個(gè)函數(shù)名糠悼，發(fā)送給前端。換句話說浅乔，JSONP 需要對應(yīng)接口的后端的配合才能實(shí)現(xiàn)倔喂。image
本實(shí)例中點(diǎn)擊按鈕后創(chuàng)建 script 標(biāo)簽，通過js方式來獲取數(shù)據(jù)靖苇，數(shù)據(jù)解析過程如下：
從js文件中獲取到 news 中的數(shù)據(jù)后席噩，先給文件添加數(shù)據(jù)類型以便瀏覽器判斷，然后再判斷是否使用callback函數(shù)贤壁，如果使用悼枢，就通過JSON.stringify()方法將數(shù)組中的數(shù)據(jù)轉(zhuǎn)換成 一個(gè)JSON 字符串的值然后兩邊加上 ' ( ' 和 ' ) ' 并返回，再將發(fā)送數(shù)據(jù)通過 appendHtml 函數(shù)添加到 ul 標(biāo)簽中脾拆。
2.CORS
CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing）馒索，是一種 ajax 跨域請求資源的方式，支持現(xiàn)代瀏覽器名船，IE支持10以上绰上。 實(shí)現(xiàn)方式很簡單，當(dāng)你使用 XMLHttpRequest 發(fā)送請求時(shí)渠驼，瀏覽器發(fā)現(xiàn)該請求不符合同源策略蜈块，會(huì)給該請求加一個(gè)請求頭：Origin，后臺進(jìn)行一系列處理迷扇，如果確定接受請求則在返回結(jié)果中加入一個(gè)響應(yīng)頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值百揭，如果有則瀏覽器會(huì)處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)蜓席，如果不包含瀏覽器直接駁回器一，這時(shí)我們無法拿到響應(yīng)數(shù)據(jù)。所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別瓮床，代碼完全一樣盹舞。
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')
//允許localhost地址進(jìn)行跨域
res.setHeader('Access-Control-Allow-Origin','*')
//允許所有人使用這個(gè)數(shù)據(jù)
-
降域
image
域名為http://b.jrg.com:8080/b.html的網(wǎng)頁以iframe的形式嵌在域名為http://a.jrg.com:8080/a.html的網(wǎng)頁中产镐，它們來自不同的域名，正常情況下不能進(jìn)行跨域訪問踢步。
但是當(dāng)我們?yōu)閮蓚€(gè)頁面都加上這樣一句代碼：
document.domain = 'jrg.com';
這時(shí)候這兩個(gè)頁面就位于同一個(gè)域名下面了癣亚，就可以在頁面a中對頁面b進(jìn)行操作了，兩個(gè)頁面可以互相訪問获印。
但是這個(gè)方法有個(gè)限制述雾，就是兩個(gè)域名要有相同對的部分才可以，比如這個(gè)例子中的就都含有jrg.com這一部分兼丰。
