Vue+NodeJS的跨域请求如何保存session

今天一直在练习如何使用Vue，就把自己之前用node写的个人博客改改，拿来当接口，涉及到跨域请求的问题，接下来简单的说下自己所遇到的问题，和解决方法。

一. 用cors来实现跨域请求：

一想到跨域请求，脑子里首先出现的是jsonp，但是jsonp只能是get请求，在向后台提交数据时显然用get是不合适的，所以选择用cors，用cors时后台要实现相关的配置，如下：

var app = express();  //express框架

//设置跨域访问  
app.all('*', function(req, res, next) {  
    res.header('Access-Control-Allow-Origin', "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");  
    next();  
});

上面的设置就不一一解释了，我想根据每个字段的值，应该都知道是干什么的，特别强调下：res.header('Access-Control-Allow-Origin', "*");，这样设置允许所有的域，如果将*号改为指定的域，则表明只允许特定的域。

二. 如何来存session?

因为我用的是vue-resource插件，所以在每次跨域请求后台时都是一个新的session，那么如何来保存我们的session呢？当然是要打开cookie了，这样才能保证每次的session都不是新的。

了解cors的都知道，在后台如果要允许提交cookie的话，要设置：Access-Control-Allow-Credentials：true，这样后端才会接收前端发来的cookie，所以将后台的跨域请求设置改一下就行了：

//将外源设为指定的域，比如：http://localhost:8080
res.header('Access-Control-Allow-Origin', "http://localhost:8080");
//将Access-Control-Allow-Credentials设为true
res.header('Access-Control-Allow-Credentials', true);

当然只允许后台接收cookie是不够的，必须得有人发送cookie啊，所以前端的请求头信息也是要变的，加上：withCredentials: true就可以了。

以用户登录为例：

    submit: function (){
      this.$http.post(this.url, {
        username: this.username, 
        userpass: this.userpass
      },{ 
        withCredentials: true  //打开cookie
      }).then( res => {
        console.log(res);
        if (res.body.result == 'ok'){
          this.$router.push({path: '/home'});
        }
      }).catch( error => {
        console.log(error);
      });
    }

就这样简单的设置一下就可以了，这也是第一次对cors的应用，希望对初学的你也有帮助！

Vue+NodeJS的跨域请求如何保存session

猜你喜欢