nodejs两种方式实现跨域(jsonp,cors)

介绍两种常用的跨域方式（jsonp，cors），以及他们的优缺点。
* ## 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});
});

最后得到的结果如图：

拿到最后的数据。

那么如果是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});
});

最后的结果：

报错了，并且还把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）：
———-||———-
———-||———-
cors实现跨域很简单，其实就是在每次发起请求的时候，后台向服务器放回一个自己设置的头文件信息，后面的代码就和普通的ajax请求一样。

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

更多原创文章访问：meetqy.com