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 相关文章推荐
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
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
世界收音机发展史
2021/03/01 无线电
如何给phpadmin一个保护
2006/10/09 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
js function使用心得
2010/05/10 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python flask实现分页的示例代码
2018/08/02 Python
Django实现网页分页功能
2019/10/31 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
python 简单的调用有道翻译
2020/11/25 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
生日宴会答谢词
2014/01/09 职场文书
挂科检讨书范文
2014/02/20 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP