express解决ajax跨域访问session失效问题

更新日期: 2019-06-19 阅读: 2.5k 标签: 缓存

最近在学习express,就用以前做的项目来进行express前后端分离的练手了,在做登陆注册的时候发现跨域的时候,session的值是会失效的,导致session里面的数据获取为undefined,网上找资料加上自己的不断尝试,终于找到了解决方法,简单记录一下解决方法。


1、客户端因为session原则上是需要cookie支持的,所以Ajax方法里面必须添加 xhrFields:{withCredentials:true},表示允许带Cookie的跨域Ajax请求( 特别说明,只要使用的session都得加这句)

   $(‘#login‘).click(function () {
        $.ajax({
            url: ‘http://localhost:3000/users/yzm‘,//服务端路由地址
            type: ‘get‘,
            xhrFields:{withCredentials:true},
            dataType: ‘json‘,
            success:function(data){
                $(‘#yzm_img‘).html(data)
            },
            error:function(){
                alert(‘error‘);
            }
        });
    });
    $(‘#form_login‘).submit(function (e) {/!*登录*!/
        e.preventDefault();/!*阻止表单默认事件,页面全局刷新*!/
        var data=$(‘#form_login‘).serialize();/!*将表单里的数据包装起来*!/
        $.ajax({
            url : ‘http://localhost:3000/users/login‘,
            type : "post",
            data : data,
            xhrFields:{withCredentials:true},
            dataType:‘json‘,
            success:function(msg) {
                alert("这是返回的数据"+msg);
            },
            error:function(err){
                alert("这是失败的信息"+err);
            }
        });
    });

通过设置 withCredentials: true ,发送Ajax时,Request header中便会带上 Cookie 信息。


2、服务器端修改app.js文件
相应的,对于客户端的参数,服务器端也需要进行设置。
对应客户端的 xhrFields.withCredentials: true 参数,服务器端通过在响应 header 中设置 Access-Control-Allow-Credentials = true 来运行客户端携带证书式访问。通过对 Credentials 参数的设置,就可以保持跨域 Ajax 时的 Cookie。

var express = require(‘express‘);
var session = require(‘express-session‘);/*引入会话变量*/

var app = express();
app.all(‘*‘, function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:63342");//前端域名
    res.header("Access-Control-Allow-Credentials",‘true‘);
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    next();
});

特别注意:服务器端 Access-Control-Allow-Credentials = true时,参数Access-Control-Allow-Origin 的值不能为 ‘*‘ ,必须为自己客户端项目所在地址。


3、服务器中使用session

router.get(‘/yzm‘, function(req, res, next) {
    req.session.yzm=‘abcd‘;
}
router.post(‘/login‘, function(req, res, next) {
 console.log(req.session.yzm);
}

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/3784

相关推荐

给url加时间戳,骗过浏览器缓存

修改js的时候总是因为浏览器不刷新缓存,导致修改无效。URL后面添加随机数通常用于防止客户端(浏览器)缓存页面。 浏览器缓存是基于url进行缓存的,如果页面允许缓存

Nginx禁止html等缓存

在本地开发的时候,经常会碰到缓存引起的莫名其妙的问题,最暴力的方式就是清掉浏览器的缓存,或者使用Ctrl + F5,Shift + F5强制刷新页面。 有时候按了好几下,缓存还是清不掉,只能暂时禁用浏览器静态资源缓存了

Node.js中的code cache

V8使用JIT去解析JS,在JS代码执行之前,首先要消耗大量的时间在解析和编译中,这会拖慢JS的总执行时间,在2015年V8支持了code cache方案来解决这个问题。

vue后台管理系统解决keep-alive页面路由参数变化时缓存问题

一个后台管理系统,一个列表页A路由配置需要缓存,另一个页面B里面有多个跳转到A路由的链接。问题描述:首先访问/A?id=1页面,然后到B页面再点击访问A?id=2的页面,发现由于页面A设置了缓存,数据还是id=1的数据,并没有更新。

解决vue,keep-alive不同路由同一个组件的缓存问题

当vue使用keep-alive缓存页面状态时,当不同路由指向同一个组件,如何分别缓存页面状态的问题。vue缓存时如果发现组件相同,则会认定为同一个。

前端静态资源自动化处理版本号防缓存

浏览器会默认缓存网站的静态资源文件,如:js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰,最常见的问题就是不能及时更新静态资源,造成新版本发布时用户无法及时看到新版本的变化,严重影响了用户体验。

浏览器缓存问题原理以及解决方案

浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中,为什么使用缓存:减少网络带宽消耗,降低服务器压力,减少网络延迟,加快页面打开速度

js清除浏览器缓存的方法

怎么清除浏览器缓存,比如每次进入页面后先清理上次浏览器缓存的html,css,js ? 直接在html页面的head标签中添加,当然这个需要浏览器支持, 不想缓存静态文件,

浏览器缓存_HTTP强缓存和协商缓存

浏览器缓存主要分为强强缓存(也称本地缓存)和协商缓存(也称弱缓存),强缓存是利用http头中的Expires和Cache-Control两个字段来控制的,用来表示资源的缓存时间。协商缓存就是由服务器来确定缓存资源是否可用.

抽离css以及公共js

分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。当我们考虑更好地利用缓存来加速静态资源访问时,会尝试把一些公共资源单独分离开来,利用缓存加速,以避免重复的加载

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!