jquery + node 使用 CORS 实现跨域访问,支持cookie和自定义header
发布于 6 年前 作者 jyk0011 3425 次浏览 来自 分享

跨域有多种方式,现在的情况看来还是CORS更适合一些,有很多优点,比如浏览器正式支持、支持post、可以控制跨域访问的网站等。

我们来看看node如何实现cors方式的跨域。在网上找到了一些代码,考过来之后运行报错,可能这个是在express里面的写法吧,那么原生的写法是什么样子的呢?又找了半天,并且经过测试得到了原生的写法: express的写法:

—app.js— app.all(’’, function(req, res, next) { res.header(“Access-Control-Allow-Origin”, ""); res.header(“Access-Control-Allow-Headers”, “Content-Type,Content-Length, Authorization, Accept,X-Requested-With”); res.header(“Access-Control-Allow-Methods”,“PUT,POST,GET,DELETE,OPTIONS”); res.header(“X-Powered-By”,’ 3.2.1’) if(req.method==“OPTIONS”) res.send(200);/让options请求快速返回/ else next(); });

node原生写法:

var http = require(“http”); http.createServer(function (req, res) { var a={ “a1”:“www” };

    // 获得客户端的Cookie
    var Cookies = {};
    req.headers.cookie && req.headers.cookie.split(';').forEach(function( Cookie ) {
        var parts = Cookie.split('=');
        Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || '' ).trim();
    });
    console.log(Cookies);

    //获取自定义头
    console.log(req.headers.xtoken);

    // 向客户端设置一个Cookie
    res.setHeader('Set-Cookie','myCookie2=test');
    //res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8050"); //带cookie的话,不能写*
    res.setHeader("Access-Control-Allow-Credentials", true); //允许带 cookie
    res.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With,xToken");
    res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.setHeader("X-Powered-By",' 3.2.1');
    res.writeHeader(200, {'Content-Type': 'application/json'});
    if(req.method=="OPTIONS"){
        /*让options请求快速返回*/
        res.end();
    }
    else
    {
        res.write(JSON.stringify(a));
        res.end();
    }
}

}).listen(8080);

需要先用 setHeader 进行设置,最后再用 writeHeader 进行设置。这样就可以了。  还有一些小地方,设置不好的话很容易报错。翻来覆去调试了好久才好。  然后就是客户端的写法了,由于客户端使用的框架不同,设置方式也有点差别,这里先介绍一下比较基本的jQuery的方式。

 $.ajax({
           type: "POST",          //post方式 
           dataType: "JSON",      //json格式的数据
           cache: false,           //客户端不缓存
           headers: {           //自定义头
               xtoken: "1234qwert"
           },
           xhrFields: {
             //允许跨域访问时添加cookie
             withCredentials: true     //true "Access-Control-Allow-Origin" 不能写* ;false可以写 *
           },
           crossDomain: true,
           url: "http://127.0.0.1:8080/1234",
           data: {"a":"11"},        //json格式的数据
           //timeout: 2000,
           error: function (request, textStatus, errorThrown) { //访问失败,自动停止加载动画,并且给出提示
               alert("提交的时候发生错误!");
           },
           success: function (data) {
                $("#div").html(data.a1);
           }
       });

这里的 xhrFields 设置,折腾半天,找了好久终于搞定了。其实只需要在后端加一行代码就行。 另外用了自定义头,客户端会自动发起两次请求。就是说你的代码之ajax了一次,但是浏览器会发起两个请求,后端会收到两个请求,所以有了 if(req.method==“OPTIONS”) res.send(200); 这样的判断。

参考目录 1、node的原生 header: https://www.cnblogs.com/jay–zhang/p/6229139.html

2、node 接收 自定义 header 作者:zding92 来源:CSDN 原文:https://blog.csdn.net/u011481543/article/details/79582555

3、node 操作cookie http://www.cnblogs.com/rubylouvre/archive/2012/08/19/2645644.html

ps:第一次在这里分享。不知道这样的分享有没有用。

3 回复

代码的高亮是怎么弄的?有一段没弄上呢?

回到顶部