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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
前端开发基础javaScript的六大作用
Aug 06 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
Zend Guard一些常见问题解答
2008/09/11 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php常用hash加密函数
2014/11/22 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Pycharm小白级简单使用教程
2020/01/08 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
配件采购员岗位职责
2013/12/03 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL