实现跨域的方法
2017-12-17 本文已影响2人
大脸猫_2e21
不同域下的接口获取数据，可以使用jsonp和cors。（ie10以下可以使用jsonp获取数据）
- jsonp实现跨域。HTML中script标签可以加载其他域下的js
- 例如在页面插入<script src="http://api.jirengu.com/weather.php"></script>这时候会向天气接口发送请求获取数据，获取数据后作为js来执行。但这里的数据是JSON格式的数据，直接作为JS运行需要用一下方式：
在页面插入<script src="http://api.jirengu.com/weather.php?callback=showData"></script>这个请求到达后端后，后端会解析callback这个参数获取到字符串showData，再发送数据做如下处理：showData({"city": "hangzhou", "weather": "晴天"})前端script标签在加载数据后会把showData({"city": "hangzhou", "weather": "晴天"})作为js执行，这实际上就是调用showData这个函数。用户只需要在提前在页面定义好showData这个全局函数，在函数内部处理参数即可。
html:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<ul class="news">
</ul>
<button class="show">show news</button>
</div>
<script>
$('.show').addEventListener('click', function(){
var script = document.createElement('script');
script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml';
document.head.appendChild(script); //添加script标签 向src发送请求
document.head.removeChild(script); //发送请求之后删除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>
server:
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
switch (pathObj.pathname) {
case '/getNews':
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心"
]
res.setHeader('Content-Type','text/json; charset=utf-8')
if(pathObj.query.callback){
res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')')
}else{
res.end(JSON.stringify(news))
}
break;
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
if(e){
res.writeHead(404, 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
- cors支持IE10以上
- XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：origin，后台进行一系列处理，如果确定接受请求则在返回加过中加入一个响应头：Acess-Control-Allow-Origin;浏览器判断该响应头中是否包含origin的值，如果有则浏览器会处理响应，如果不包含浏览器直接驳回。
html:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<ul class="news">
</ul>
<button class="show">show news</button>
</div>
<script>
$('.show').addEventListener('click', function(){
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:8080/getNews', true)
xhr.send()
xhr.onload = function(){
appendHtml(JSON.parse(xhr.responseText))
}
})
function appendHtml(news){
var html = ''
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>'
}
$('.news').innerHTML = html
}
function $(selector){
return document.querySelector(selector)
}
</script>
</body>
</html>
server.js:
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
switch (pathObj.pathname) {
case '/getNews':
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心"
]
// res.setHeader('Access-Control-Allow-Origin','http://localhost:8080') //http://localhost:8080可以使用我的数据
res.setHeader('Access-Control-Allow-Origin','*') //任何人都可以使用我的数据
res.end(JSON.stringify(news))
break;
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
if(e){
res.writeHead(404, 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
不同域下的ifram的操作
- 降域 ：域名为http://b.jrg.com:8080/b.html的网页以iframe的形式嵌在域名为http://a.jrg.com:8080/a.html的网页中，他们来自不同的域名，正常情况下不能进行跨域访问。但是当我们为两个页面加上这样一句代码：
document.domain = "jrg.com"
此时这两个页面位于同一个域名下了，就可以在a页面中对页面b进行操作了，两个页面可以互相访问。但这个方法有个限制，就是两个域名要有相同的部分才可以实现降域。
降域：
a.html
<html>
<style>
.ct{
width: 910px;
margin: auto;
}
.main{
float: left;
width: 450px;
height: 300px;
border: 1px solid #ccc;
}
.main input{
margin: 20px;
width: 200px;
}
.iframe{
float: right;
}
iframe{
width: 450px;
height: 300px;
border: 1px dashed #ccc;
}
</style>
<div class="ct">
<h1>使用降域实现跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jrg.com:8080/a.html">
</div>
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
</div>
<script>
//URL: http://a.jrg.com:8080/a.html
document.querySelector('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].document.querySelector('input').value = this.value;
})
document.domain = "jrg.com" //使二者的域名相同，就可以实现相互访问了，如果二者域名不同，在a.html中是不能访问iframe的
</script>
</html>
########################################
b.html:
<html>
<style>
html,body{
margin: 0;
}
input{
margin: 20px;
width: 200px;
}
</style>
<input id="input" type="text" placeholder="http://b.jrg.com:8080/b.html">
<script>
// URL: http://b.jrg.com:8080/b.html
document.querySelector('#input').addEventListener('input', function(){
window.parent.document.querySelector('input').value = this.value;
})
document.domain = 'jrg.com';
</script>
</html>
- postmessage 不需要降域，当需要和页面中的iframe操作时，当需要操作页面中iframe的时候，需要向iframe post一个消息，如果iframe同意修改，会返回给我一个响应
a.html:
<html>
<style>
.ct{
width: 910px;
margin: auto;
}
.main{
float: left;
width: 450px;
height: 300px;
border: 1px solid #ccc;
}
.main input{
margin: 20px;
width: 200px;
}
.iframe{
float: right;
}
iframe{
width: 450px;
height: 300px;
border: 1px dashed #ccc;
}
</style>
<div class="ct">
<h1>使用postMessage实现跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jrg.com:8080/a.html">
</div>
<iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>
</div>
<script>
//URL: http://a.jrg.com:8080/a.html
$('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].postMessage(this.value,'*');
})
window.addEventListener('message',function(e) {
$('.main input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
</html>
b.html:
<html>
<style>
html,body{
margin: 0;
}
input{
margin: 20px;
width: 200px;
}
</style>
<input id="input" type="text" placeholder="http://b.jrg.com:8080/b.html">
<script>
// URL: http://b.jrg.com:8080/b.html
$('#input').addEventListener('input', function(){
window.parent.postMessage(this.value, '*');
})
window.addEventListener('message',function(e) {
$('#input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
</html>
