介绍两种常用的跨域方式(jsonp,cors),以及他们的优缺点。

jsonp跨域

利用<script>标签可以跨域,让服务器端返回可执行的Javascript函数,参数为要回发的数据。
1-8
上面很好的解释了get请求jsonp跨域的原理。
来看一下具体的代码实现

get使用jsonp跨域

/*前端代码 引入jquery*/
 $.ajax({
        url:ip+"/jsonp_get",
        dataType:"jsonp",
        success:function (data) {
            console.log(data)
        }
});
/*nodejs代码 引入express框架*/
app.get("/jsonp_get",function (req,res) {
   		res.jsonp({a:1,b:2});
});

最后得到的结果如图:
2-4
拿到最后的数据。

那么如果是post要跨域怎么办尼(先使用jsonp来试一下)

/*前端代码*/
$.ajax({
        url:ip+"/jsonp_post",
        type:"post",
        dataType:"jsonp",
        success:function (data) {
            console.log(data)
        }
});
/*nodejs代码*/
app.post("/jsonp_post",function (req,res) {
   		res.jsonp({a:1,b:2});
});

最后的结果:
3-3
报错了,并且还把post请求变成了get,充分说明post不能使用jsonp来实现跨域,那么应该怎么办?

cors实现跨域

在头信息之中,增加一个Access-Control-Allow-Origin,服务器根据这个值,决定是否同意这次请求。
看一下具体的代码实现:
前端ajax按照我们正常的写就行,主要后台做了一下处理

//get
$.get(ip+"/cors_get",function (data) {
		console.log(data)
})
//post
$.post(ip+"/cors_post",function (data) {
		console.log(data)
})

这段代码放在所有你想要实现跨域请求的前面(一般放在最前面就行)

/*nodejs代码 cors实现跨域*/
app.use(function (req,res,next) {
		res.header("Access-Control-Allow-Origin", "*");
		res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
		res.header("Access-Control-Allow-Headers", "Content-Type");
		res.header("Access-Control-Allow-Credentials","true");
		next();
});
//get
app.get("/cors_get",function (req,res) {
   		res.json({a:1,b:2});
});
//post
app.post("/cors_post",function (req,res) {
    	res.json({a:1,b:2});
});

最后看结果(依次是get、post):
4-2----------||----------
5-1----------||----------
cors实现跨域很简单,其实就是在每次发起请求的时候,后台向服务器放回一个自己设置的头文件信息,后面的代码就和普通的ajax请求一样。

最后总结一下:jsonp跨域很方便,每次在使用的时候,前后台都是用jsonp的方式发送内容就行,但是不支持post。cors跨域,前端不需要做任何改变,就是普通的ajax请求就行,只是后台每次返回信息的时候,加一个设置一下header就行了,后面的操作和普通的请求一样。meetqy.com

转载请注明出处