跨域的原因
瀏覽器出于安全方面的考慮，只允許與本域下的接口交互么抗。不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方的資源。
需要注意的是: 對于當(dāng)前頁面來說頁面存放的 JS 文件的域不重要泪喊，重要的是加載該 JS 頁面所在什么域
跨域的幾種方法
-
JSOP
JSONP是通過 script 標(biāo)簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù)當(dāng)做 JS 代碼來執(zhí)行 提前在頁面上聲明一個函數(shù)，函數(shù)名通過接口傳參的方式傳給后臺髓涯，后臺解析到函數(shù)名后在原始數(shù)據(jù)上「包裹」這個函數(shù)名袒啼，發(fā)送給前端。換句話說纬纪，JSONP 需要對應(yīng)接口的后端的配合才能實(shí)現(xiàn)蚓再。
jsonp實(shí)例.png
本實(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)換成 一個JSON 字符串的值然后兩邊加上 ' ( ' 和 ' ) ' 并返回惶洲，再將發(fā)送數(shù)據(jù)通過 appendHtml 函數(shù)添加到 ul 標(biāo)簽中。
-
CORS
CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing）膳犹，是一種 ajax 跨域請求資源的方式恬吕，支持現(xiàn)代瀏覽器，IE支持10以上须床。 實(shí)現(xiàn)方式很簡單铐料，當(dāng)你使用 XMLHttpRequest 發(fā)送請求時，瀏覽器發(fā)現(xiàn)該請求不符合同源策略豺旬，會給該請求加一個請求頭：Origin钠惩，后臺進(jìn)行一系列處理，如果確定接受請求則在返回結(jié)果中加入一個響應(yīng)頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值族阅，如果有則瀏覽器會處理響應(yīng)篓跛，我們就可以拿到響應(yīng)數(shù)據(jù)，如果不包含瀏覽器直接駁回坦刀，這時我們無法拿到響應(yīng)數(shù)據(jù)愧沟。所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別，代碼完全一樣鲤遥。
cors實(shí)例.png
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')
//允許localhost地址進(jìn)行跨域
res.setHeader('Access-Control-Allow-Origin','*')
//允許所有人使用這個數(shù)據(jù)
-
降域
降域?qū)嵗?png
域名為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)閮蓚€頁面都加上這樣一句代碼：
document.domain = 'jrg.com';
這時候這兩個頁面就位于同一個域名下面了混坞，就可以在頁面a中對頁面b進(jìn)行操作了，兩個頁面可以互相訪問钢坦。
但是這個方法有個限制究孕，就是兩個域名要有相同對的部分才可以，比如這個例子中的就都含有jrg.com這一部分场钉。
