-
本地搭建服務(wù)器，演示同源策略
1.修改本地hosts文件
2.在index.html文件中引入 http://b.com:8080/getNews 即a.com向b.com發(fā)請(qǐng)求
由于b.com未做處理衅疙，與a.com不同源鸳慈，跨域請(qǐng)求走芋，被瀏覽器阻止了。
index.html代碼如下：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
.container{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<ul class="news">
<li>第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)</li>
<li>男雙力爭會(huì)師決賽 </li>
<li>女排將死磕巴西肋杖！</li>
</ul>
<button class="change">換一組</button>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('.change').addEventListener('click', function(){
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://a.com:8080/getNews', true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
appendHtml( JSON.parse(xhr.responseText) )
}
}
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
</script>
</html>
router.js代碼：
app.get('/getNews', function(req, res){
var news = [
"第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出戰(zhàn) 男雙力爭會(huì)師決賽",
"女排將死磕巴西状植！郎平安排男陪練模仿對(duì)方核心",
"沒有中國選手和巨星的110米欄 我們還看嗎津畸？",
"中英上演奧運(yùn)金牌大戰(zhàn)",
"博彩賠率挺中國奪回第二紐約時(shí)報(bào)：中國因?qū)κ址幎鴣G失的獎(jiǎng)牌最多",
"【邊界】最“出柜”奧運(yùn)必怜？同性之愛閃耀里約",
"【特評(píng)】下跪拜謝與洪荒之力一樣 都是真情流露"
]
var data = [];
for(var i=0; i<3; i++){
var index = parseInt(Math.random()*news.length);
data.push(news[index]);
}
res.send(data);
})
把index.html改成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
.container{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<ul class="news">
<li>第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)</li>
<li>男雙力爭會(huì)師決賽 </li>
<li>女排將死磕巴西梳庆！</li>
</ul>
<button class="change">換一組</button>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://a.com:8080/a.txt"></script>
<script src="http://a.com:8080/getNews"></script>
</html>
添加a.txt文件
console.log('haha')
$('.change').addEventListener('click', function(){
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://a.com:8080/getNews', true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
appendHtml( JSON.parse(xhr.responseText) )
}
}
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
因?yàn)?code>http://a.com:8080/a.txt與http://a.com:8080同源丧肴，可以讀取數(shù)據(jù)胧后，加載js。
-
至少使用一種方式解決跨域問題
1.采用JSONP的方式（需要后端支持）：
html中script標(biāo)簽可以引入其他域下的js纸巷，比如引入線上的jquery庫眶痰。利用這個(gè)特性竖伯，可實(shí)現(xiàn)跨域訪問接口因宇。需要后端支持
index.html代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
.container{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<ul class="news">
<li>第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)</li>
<li>男雙力爭會(huì)師決賽 </li>
<li>女排將死磕巴西察滑！</li>
</ul>
<button class="change">換一組</button>
</div>
<!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script>
$('.change').addEventListener('click', function(){
var script = document.createElement('script');
script.src = 'http://a.com:8080/getNews?callback=appendHtml';//此處callback的值贺辰，與下面函數(shù)名需一致嵌施，傳遞的是什么，對(duì)應(yīng)的得有一個(gè)函數(shù)去處理它滓侍。注意callback是前后端約定好的牲芋，也可以用別的缸浦。比如cb氮兵，前后端需保持一致
document.head.appendChild(script);
document.head.removeChild(script);
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
</script>
</html>
相當(dāng)于創(chuàng)建新的js,引用js.
后端代碼：
app.get('/getNews', function(req, res){
var news = [
"第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出戰(zhàn) 男雙力爭會(huì)師決賽",
"女排將死磕巴西泣栈！郎平安排男陪練模仿對(duì)方核心",
"沒有中國選手和巨星的110米欄 我們還看嗎？",
"中英上演奧運(yùn)金牌大戰(zhàn)",
"博彩賠率挺中國奪回第二紐約時(shí)報(bào)：中國因?qū)κ址幎鴣G失的獎(jiǎng)牌最多",
"最“出柜”奧運(yùn)掺涛？同性之愛閃耀里約",
"下跪拜謝與洪荒之力一樣 都是真情流露"
]
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 cb = req.query.callback;
//callback與前端一致薪缆，也可以約定為別的伞广，callback是通過這么一個(gè)字段傳遞給它的方法名
if(cb){
res.send(cb + '('+ JSON.stringify(data) + ')');
}else{
res.send(data);
}
})
可以直接通過本地文件訪問嚼锄，不通過服務(wù)器，因?yàn)橄喈?dāng)于js代碼拧粪。
2.采用CORS的方式（全稱是跨域資源共享（Cross-Origin Resource Sharing））
index.html文件與本文第一個(gè)index.html文件相同既们，在router.js文件中加一個(gè)響應(yīng)頭res.header("Access-Control-Allow-Origin", "http://b.com:8080");
app.get('/getNews', function(req, res){
var news = [
"第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
"正直播柴飚/洪煒出戰(zhàn) 男雙力爭會(huì)師決賽",
"女排將死磕巴西！郎平安排男陪練模仿對(duì)方核心",
"沒有中國選手和巨星的110米欄 我們還看嗎号杏？",
"中英上演奧運(yùn)金牌大戰(zhàn)",
"博彩賠率挺中國奪回第二紐約時(shí)報(bào)：中國因?qū)κ址幎鴣G失的獎(jiǎng)牌最多",
"【邊界】最“出柜”奧運(yùn)斯棒？同性之愛閃耀里約",
"【特評(píng)】下跪拜謝與洪荒之力一樣 都是真情流露"
]
var data = [];
for(var i=0; i<3; i++){
var index = parseInt(Math.random()*news.length);
data.push(news[index]);
}
res.header("Access-Control-Allow-Origin", "http://b.com:8080");
// res.header("Access-Control-Allow-Origin", "*");
res.send(data);
})
----本文版權(quán)歸本人和饑人谷所有荣暮，請(qǐng)勿轉(zhuǎn)載
