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


Posted in Javascript onJune 20, 2019

前言

最近在学习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);
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
深入研究React中setState源码
Nov 17 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 #Javascript
如何在微信小程序中实现Mixins方案
Jun 20 #Javascript
js JSON.stringify()基础详解
Jun 19 #Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 #jQuery
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 #Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 #Javascript
javascript创建元素和删除元素实例小结
Jun 19 #Javascript
You might like
example2.php
2006/10/09 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
google地图的路线实现代码
2009/08/20 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
市场推广策划方案
2014/06/02 职场文书
找工作求职信
2014/07/07 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技