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

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

  • jsonp跨域

    利用<script>标签可以跨域,让服务器端返回可执行的Javascript函数,参数为要回发的数据。

    上面很好的解释了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});
    });
    

    最后得到的结果如图:

    拿到最后的数据。

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

转载请注明出处

查看微博长图