服务器跨域以及session保持

基础知识

1.跨域

url的组成

    当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 。

2. cookie与session

在网站中，http请求是无状态的。也就是说，你在同一客户端上多次请求服务器，每次的请求都是没有任何影响的，服务器并不会保留任何状态信息。这就会带来一个问题，当你输入帐号密码后，向服务器发送请求，经服务器判断你账号密码正确（数据库中存在）返回你登录成功的信息后，你再次向服务器请求数据，服务器是并不知道你已经登录成功的状态的，所以你还要重新登录（当然，重新登录也是没有用的），这就陷入了死循环。

cookie和session都是为了解决上述问题的。

cookie是通过客户端保留状态信息。第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。然而由于cookie将状态保存到了客户端，这就很不安全。比如说我不是一个网站的vip用户，但是，我可以通过检查vip用户向服务器发送的cookie伪造出来一个假的cookie，使自己获得vip用户的数据。所以cookie里面不能保存比较敏感的信息。而且cookie存储的数据量有限，不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用cookie只能存储一些小量的数据。

而session就是将状态保存到服务器上的。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上，客户端浏览器再次访问时，只需要从该 Session 中查找该客户的状态就可以了。

目前，状态判断的一种很流行方式是cookie与session结合实现的。还拿上面的登录来举例子。当你输入帐号密码后，向服务器发送请求，服务器判断你登录成功后，会将你的登录状态记录到session中，并且给浏览器返回一个session_id，浏览器在cookie中保存这个session_id，在下一次向服务器请求数据的时候，会通过cookie将session_id传给服务器，服务器通过session_id找到对应的session就可以判断你登录的状态了。

3. express框架下的session实现

//引入express-session和cookie-parser包（npm下载）
const session = require("express-session");
const cookieParser = require("cookie-parser")
//配置session
app.use(session({
    secret: "wisompark", //设置签名秘钥 内容可以任意填写
    cookie: {
        maxAge: 60 * 1000 * 60
    }, //设置cookie的过期时间，60分钟
    resave: true, 
    saveUninitialized: false 
}))


//在调用登录接口成功后设置session的值
req.session.login=true;
req.session.name=USERNAME;

//在调用数据的接口时，可以先对session进行判断再判断进行什么操作

resave 属性为true时：每次请求，无论session的内容是否发生了变化，都要重新保存一下，如果要在服务器端要对session进行操作的话，这个属性必须设置为true。

saveUninitialized ：是否设置session在存储容器中可以给修改。比如session过期30分钟，没有人操作时候session 30分钟后过期，如果有人操作，每次以当前时间为起点，使用原设定的maxAge重设session过期时间到30分钟只有这种业务场景必须同行设置resave和rolling为true.同时saveUninitialized要设置为false允许修改。

问题

问题描述

设置完session配置后，登录成功跳转到管理页面时，还是要重新登录。在服务器端打印session发现第二次请求时的session中并没有登录成功后在session中设置的状态值。

问题出现的环境：node express框架打架后端，前端通过AJAX请求数据。

问题分析

出现该问题的主要原因是在跨域请求数据的时候，客户端在向服务器请求数据的时候，所携带的cookie在服务器端是无法读取的。所以在第二次请求数据时，服务器并没有接收到客户端传过来的cookie中的session_id，会认为这个请求是无状态的，就会给他附上一个新的session，并向客户端传过去一个新的session_id。

解决问题

思路一：既然是跨域造成的，就不让其跨域就好了。

1.通过设置取消浏览器的同源策略；

2.将网络服务器和后端数据服务器放在一起；

在node中创建一个静态目录，将前端页面放到静态目录中，这样在请求数据的时候，协议、域名、端口都是一致的，就不会有跨域的问题了。

思路二：跨域时让服务器端能读取客户端发过来的cookie

//前端设置
//jQuery
$.ajaxSetup({
    xhrFields:{withCredentials: true
    }
});

//axios
 axios({
     method: 'get', 
     url: 'XXX',  
     withCredentials: true
 })

//后端设置
/*
设置Access-Control-Allow-Credentials为true
注意，在设置了上面的参数后，Access-Control-Allow-Origin的值就不能为*了。
*/
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:8848');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');//设置方法
  res.header('Access-Control-Allow-Credentials', true);
  if (req.method == 'OPTIONS') {
    res.send(200); // 意思是，在正常的请求之前，会发送一个验证，是否可以请求。
  }
  else {
    next();
  }
});