1.CORS方式實現(xiàn)跨域羔飞。
CORS需要瀏覽器和服務器同時支持。目前拓颓，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10孕惜。
整個CORS通信過程，都是瀏覽器自動完成晨炕，不需要用戶參與衫画。對于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別瓮栗，代碼完全一樣削罩。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源，就會自動添加一些附加的頭信息费奸，有時還會多出一次附加的請求弥激，但用戶不會有感覺。
因此愿阐，實現(xiàn)CORS通信的關鍵是服務器微服。只要服務器實現(xiàn)了CORS接口，就可以跨源通信缨历。
<div>
<ul class="content"></ul>
</div>
<div class="btn">
<button>獲取天氣</button>
</div>
<script>
function $(e) {
return document.querySelectorAll(e)
}
$('.btn button')[0].addEventListener('click', function () {
var xhr = new XMLHttpRequest()
xhr.open('get', 'http://b.jrg.com:8080/getNews', true)
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText)
doSomething(JSON.parse(xhr.responseText))
}
}
}
})
function doSomething(str) {
var fragment = document.createDocumentFragment()
for (var i = 0; i < str.length; i++) {
var li = document.createElement('li')
fragment.appendChild(li)
li.innerText = str[i]
}
$('.content')[0].appendChild(fragment)
}
</script>
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
var server = http.createServer(function(req,res){
var news = [
'你在的哈佛撒酒瘋第三輪卡發(fā)動機撒大豐收的高發(fā)地告訴對方感到十分',
'今天也un寡鳧單鵠個地方經(jīng)濟掛號費的話的好過分的話換個地方換個地方',
'國風塑try投入猶太人一頭熱一頭熱英特爾亞特亞特英特爾亞特日',
'進口庫伊uytiupsdgfdsytyeryreyterytrgfdgfdsgdfsgfdshgfshgfh',
'今天也un寡鳧單鵠個地方經(jīng)濟掛號費的話的好過分的話換個地方換個地方',
'各方當事公司范德薩各方當事官方上各方當事官方是高仿時光飛逝桂豐大廈官方'
]
var data = []
for (var i = 0; i < 3; i++) {
var index = parseInt(Math.random()*news.length)
data.push(news[index]);
news.splice(index,1)
}
res.setHeader('Access-Control-Allow-Origin','http://a.jrg.com:8080')
var pathObj = url.parse(req.url,true)
console.log(pathObj.pathname)
switch(pathObj.pathname) {
case '/getNews':
res.end(JSON.stringify(data))
break;
default:
fs.readFile(__dirname + pathObj.pathname,'binary',function(e,content) {
if(e) {
res.setHeader('404','not found')
res.end('404 not found')
} else {
res.end(content,'binary')
}
})
}
})
server.listen(8080)
console.log('監(jiān)聽成功以蕴，打開這個地址'JSONP)
2. JSONP方式實現(xiàn)跨域
- JSONP是服務器與客戶端跨源通信的常用方法。最大特點就是簡單適用辛孵，老式瀏覽器全部支持丛肮，服務器改造非常小。
它的基本思想是魄缚，網(wǎng)頁通過添加一個<script>元素宝与，向服務器請求JSON數(shù)據(jù)，這種做法不受同源政策限制冶匹；服務器收到請求后习劫，將數(shù)據(jù)放在一個指定名字的回調(diào)函數(shù)里傳回來。
<div>
<ul class="content"></ul>
</div>
<div class="btn">
<button>獲取天氣</button>
</div>
<script>
var btn = document.querySelectorAll('.btn button')[0]
var ul = document.querySelectorAll('.content')[0]
btn.addEventListener('click', function () {
var script = document.createElement('script')
script.src = '//a.jrg.com/getNews?callback=appendHtml'
document.head.appendChild(script)
})
function appendHtml(str) {
var html = '';
for (var i = 0; i < str.length; i++) {
html += '<li>' + str[i] + '</li>'
}
ul.innerHTML = html
}
</script>
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
var server = http.createServer(function (req, res) {
var news = [
'你在的哈佛撒酒瘋第三輪卡發(fā)動機撒大豐收的高發(fā)地告訴對方感到十分',
'今天也un寡鳧單鵠個地方經(jīng)濟掛號費的話的好過分的話換個地方換個地方',
'國風塑try投入猶太人一頭熱一頭熱英特爾亞特亞特英特爾亞特日',
'進口庫伊uytiupsdgfdsytyeryreyterytrgfdgfdsgdfsgfdshgfshgfh',
'今天也un寡鳧單鵠個地方經(jīng)濟掛號費的話的好過分的話換個地方換個地方',
'各方當事公司范德薩各方當事官方上各方當事官方是高仿時光飛逝桂豐大廈官方'
]
var data = []
for (var i = 0; i < 3; i++) {
var index = parseInt(Math.random() * news.length)
data.push(news[index]);
news.splice(index, 1)
}
var pathObj = url.parse(req.url, true)
switch (pathObj.pathname) {
case '/getNews':
res.setHeader('Content-Type', 'text/json,charset="utf-8')
console.log(pathObj.query.callback)
if (pathObj.query.callback) {
res.end(pathObj.query.callback + '(' + JSON.stringify(data) + ')')
} else {
res.end(JSON.stringify(data))
}
break;
default:
fs.readFile(__dirname + pathObj.pathname, 'binary', function (e, content) {
if (e) {
res.setHeader('404', 'not found')
res.end('404 not found')
} else {
res.end(content, 'binary')
}
})
}
})
server.listen(80)
console.log('監(jiān)聽成功徙硅，打開這個地址')
3. 降域
- 在兩個父子連個頁面的script標簽里面添加document.domain= '相同的一級域名'榜聂；
<h1>使用降域?qū)崿F(xiàn)跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jrg.com/a.html">
</div>
<iframe src="http://b.jrg.com/b.html" frameborder="1"></iframe>
<script>
document.querySelector('.main input').addEventListener('input',function() {
window.frames[0].document.querySelector('input').value = this.value
})
document.domain = 'jrg.com'
</script>
<div class="ct">
<input type="text" placeholder="http://b.jrg.com/b.html">
</div>
<script>
document.querySelector('input').addEventListener('input',function() {
window.parent.document.querySelector('input').value = this.value
})
document.domain = 'jrg.com'
</script>
