首页 > 其他 > 详细

关于跨域的处理的几种方法的整理

时间:2016-04-05 00:16:04      阅读:324      评论:0      收藏:0      [点我收藏+]

跨域是经常遇到的这里不再说跨域什么意思了,协议不同,端口不同,域名不同是为跨域;

解决方法:

1,后台设置代理,比如把上海有个服务器,我北京相用,可以北京后台代理,

2,前端采取jsop来获取数据

代码示例:此处后台是node.js简单实现,页面端口localhost:3020

前端:
$(function(){
$("#btn").click(function(){
$.ajax({
method:"get",
url:"http://127.0.0.1:3022/app/jsonp",//这里服务端端口是3022,跨域
dataType:"jsonp",//数据类型是jsonp
jsonp:"callback",//参数为callback
success:function(data){
console.log(data.name)
}

})
})
})
后端node.js
var express=require("express");
var app=express();
app.use(express.static("./"));
app.get(‘/app/jsonp‘,function(req,res,next){
res.jsonp({name:‘lyz‘});//注意此处格式必须是jsonp,各个语言可能写法不同
});

app.listen(3022,function(req,res){

console.log(2)
})
原理分析:人们加载任意地址的js文件都有效果,于是人类利用聪明的大脑想到把数据放到js里面,然后让前端调取,jsonp只对get有效,post无效的;

3 xhr2
这是html5新产生的ajax2,衍生出来的,于是在一些浏览器上是无效的;
这方法就是直接在服务端设置,本方法可以post,get都行
header(‘Access-control-Allow-Origin:*‘)
前台代码
$.ajax({
method:"get",
url:"http://127.0.0.1:3022/app/jsonp",
success:function(data){
console.log(data)
}

})

后台代码

var express=require("express");
var app=express();
app.use(express.static("./"));
app.get(‘/app/jsonp‘,function(req,res,next){
res.setHeader(‘Access-control-Allow-Origin‘,‘*‘);注意这里*号是所有域名都可以访问,即通配原则,如果要某特定域名访问,可单独设置
res.send("2")
});

app.listen(3022,function(req,res){

console.log(2)
})

 

关于跨域的处理的几种方法的整理

原文:http://www.cnblogs.com/lyz1991/p/5353201.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!