ajax跨域请求中的cookie问题

update 另一个问题

ajax在进行复杂请求如PUT,POST,DELETE等时,当请求为cross domain request是,会先发一个OPTIONS请求确认服务器的跨域支持情况,在发送原来的请求,所以对于服务器,需要对OPTIONS请求做一次xiang'yin

遇到的问题

对于前后端分离的应用,使用ajax跨域请求时,默认情况下是无法传输cookie的。具体的异常表现如下

客户端发送给服务器的请求中不包含cookie信息
服务器返回给客户端的响应中包含了Set Cookie 的信息,但是在浏览器的cookie中,没有记录词条cookie信息

解决方法

需要前后端都做一些小的改动

服务器端

以nodejs的后端为例,使用express框架,需要加上几行代码

app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", config().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("Access-Control-Allow-Credentials", "true");
  res.header("X-Powered-By", ' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

注意这句话:
res.header("Access-Control-Allow-Credentials", "true");

这句话用来允许跨域访问时带上cookie信息,此外有一个问题,就是当我们"Access-Control-Allow-Origin"设置为*的时候,上面这句话是无法使用的。所以不能够设置为*,否则无法使用cookie。

浏览器端

以jquery的ajax请求为例

$.ajax({
        url,
        type: 'get',
        dataType: 'json',
        // 允许跨域
        crossDomain: true,
        // 下面这句话允许跨域的cookie访问
        xhrFields: {
          withCredentials: true
        },
        success: (res) => {
          console.log(res);
        }
      });

总结

这个问题就是这样解决的,建议只允许自己前端网站的域名进行跨域访问,防止CSRF之类的攻击。

你可能感兴趣的:(ajax跨域请求中的cookie问题)