跨域一词从字面意思看,就是跨域名,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议、域名、端口有任何一个不同,都被当作是不同的域。
那我么如何实现跨域传输数据呢?一下就是三种比较简单的跨域方法,后台服务器是NodeJs
1.通过修改http请求头实现跨域
通过在被请求服务器中添加Access-Control-Allow-Origin
来实现跨域
//跨域被请求服务器的后端路由
router.get('/code',function (req, res) {
res.header("Access-Control-Allow-Origin", "http://www.trysth.top/");
var a = req.query;
res.send("传回的数据");
});
在前端页面用Ajax实现跨域请求即可
//前端请求页面
$.ajax({
type:"POST",
//url为跨域请求的服务器的地址
url: "url/code",
async:false,
data:{
name: name,
psw:psw
},
success:function(msg){
alert(msg);
}
});
2.通过jsonp实现跨域
通过jsonp实现跨域的代码
//跨域被请求服务器的后端路由
router.get('/code',function (req, res) {
var _callback = req.query.callback;
var _data = {
email:'example@163.com',
name:'jaxu'
};
if(_callback){
res.type('text/javascript');
res.send(_callback + '(' + JSON.stringify(_data) + ')');
}else{
res.json(_data);
}
});
//前端请求页面
$.ajax({
type:"get",
url: "Http://www.trysth.top/code",
async:false,
cache:false,
dataType:"jsonp",
jsonp:"callback",
data:{
name: name,
psw:psw
},
success:function(jsonp){
alert(json.name);
},
error:function (e) {
alert('error');
}
});
3.创建XMLHttpRequest实现跨域
//跨域被请求服务器的后端路由
router.post('/code',function (req,res) {
res.setHeader('Access-Control-Allow-Origin','*');
res.send({name:'待传数据'});
});
//前端请求页面
var fun = function () {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
console.log(this.responeText);
};
xhr.open('post','Http://www.trysth.top/code',true);
xhr.send();
};