Ajax跨域问题及解决方案(跨域问题及解决方案(jsonp,,cors))
跨域跨域
跨域有三个条件,满足任何一个条件就是跨域
1:服务器端口不一致
2:协议不一致
3:域名不一致
解决方案:解决方案:
1.jsonp
在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理;在前台通过动态添加script标签及
src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;为了便于使用及交流,逐渐形成了一中非正式传输协议,
人们把它称作 jsonp 。
代码如下:
html:
<body>
<form action="/" method="post" enctype="multipart/form-data">
<input type="text" name="xinxi" id="info"><br>
<input type="file" name="file" id="file"><br>
<input type="button" value="提交" name="submit" id="btn">
</form>
</body>
<script src="./jquery.js"></script>
<script>
//提前写好函数,调用函数需要传参
function callback(data){
alert(data);
}
//动态添加script标签及src属性
$('#btn').on('click',function(){
var sc = document.createElement('script');
sc.src = 'http://soul:8888/kuayu?cb=callback';
$('head').append(sc);
})
</script>
js:
var http = require('http');
var url = require('url');
var server = http.createServer();
server.listen('8888',function(){
console.log('8888');
});
server.on('request',function(req,res){
var urls = url.parse(req.url,true);
if(urls.pathname == '/kuayu'){
res.end('callback("jsonp")');//返回的数据需是前端定义的函数调用的形式
}
});
运行结果:
总结一下:
jsonp的一个要点就是允许用户传递一个callback参数给服务端, 然后服务端返回数据时会将这个callback参数作为函数名来包
裹住JSON数据, 这样客户端就可以随意定制自己的函数来自动处理返回数据了。
发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如script、img、iframe; src 的能力就是把远程的数据资源加载到本