vue前后端分离如何解决每次请求session都会变的问题

目录
  • vue前后端分离每次请求session都会变
    • 解决方法
  • vue前后端分离session丢失,前端解决方式
    • 1、解决前端每次发送的ajax都是形成新的会话
    • 2、本地测试时结果发现还是无法成功,后端获取的sessionId为null

vue前后端分离每次请求session都会变

因为前后端属于不同的域,导致每次ajax请求服务器都会当做新的用户访问,导致session丢失

解决方法

 <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://localhost:8080" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true"/>
      </customHeaders>
    </httpProtocol>
  <handlers>
</system.webServer>

在后端Web.config添加允许跨域,

<add name="Access-Control-Allow-Origin" value="http://localhost:8080" />

这里的value写前端的地址

再就是改前端ajax请求,我用的axios 在axios的index.js全局配置

axios.defaults.withCredentials=true;

这句话的意思是每次请求都带上cookie,这样每次取请求后端,就不会被认为是不同用户导致session丢失.哦了!

vue前后端分离session丢失,前端解决方式

背景：前端每次发送的ajax都是形成新的会话，本地测试时后端获取sessionId为null

**********后端的代码修改请查找其他文章，本文只涉及前端

1、解决前端每次发送的ajax都是形成新的会话

我是用的axios，只需在封装的请求时添加

axios.defaults.withCredentials=true;

根据自己代码做相应改变就行，请求时添加withCredentials属性，并且值为true。

withCredentials：true；请求时携带cookie

2、本地测试时结果发现还是无法成功,后端获取的sessionId为null

后端返回cookie

Set-Cookie: SESSION=NzgyMDdjZDgtNjJhMC00NmNkLTkxNWYtNjE4ZmRkYmFlOWQy; Path=/xxx/;

cookie后面还有一个path=/xxx/ 即后端项目路径，

只需要在为解决跨域设置代理时

原代码：

devServer: {
    proxy: {
      '/dev-api/': {
        target: 'http://baidu.com:8811',
        changOrigin: true,
        pathRewrite: {
          '^/dev-api/': '/'
        }
      }
    }
  }

以/dev-api/开头改为后端返回path开头

修改后：

devServer: {
    proxy: {
      '/xxx/': {
        target: 'http://baidu.com:8811',
        changOrigin: true,
        pathRewrite: {
          '^/xxx/': '/'
        }
      }
    }
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue使用axios引起的后台session不同操作

    新项目前端用的Vue全家桶,使用axios代替ajax请求后台接口,在调整注册接口的时候,发现在session里取不到验证码,排查后才知道获取验证码和注册两个请求的session不同,sessionId不一样. 现在调整一下Vue的配置,修改main.js文件,添加如下两行代码 import axios from 'axios' axios.defaults.withCredentials=true; 修改后 import Vue from 'vue' import App from './Ap

  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

  • vue2 前后端分离项目ajax跨域session问题解决方法

    最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. vuejs ajax跨域请求 最开始使用的是vue-resource,结果发现vue2推荐的是axios,于是改成axios:安装axios npm install axios -S 安装完成后在main.js中增加一下配置: import axios from 'axios'; axios.defa

  • 解决vue项目axios每次请求session不一致的问题

    1.vue开发后台管理项目,登录后,请求数据每次session都不一致,后台返回未登录,处理方法打开main.js设置: // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' imp

  • vue前后端分离如何解决每次请求session都会变的问题

    目录 vue前后端分离每次请求session都会变 解决方法 vue前后端分离session丢失,前端解决方式 1.解决前端每次发送的ajax都是形成新的会话 2.本地测试时结果发现还是无法成功,后端获取的sessionId为null vue前后端分离每次请求session都会变 因为前后端属于不同的域,导致每次ajax请求服务器都会当做新的用户访问,导致session丢失 解决方法  <system.webServer>     <httpProtocol>       <

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

  • ssm+vue前后端分离框架整合实现(附源码)

    前言 本文针对Spring+SpringMVC+Mybatis后台开发框架(基于maven构建)与vue前端框架(基于webpack构建)的项目整合进行介绍,对于ssm和vue单独项目的搭建不作为本文的重点,而着重介绍两者之间交互的要点. SSM 项目结构 说明 项目有service和web两个子项目组成,web依赖于service,其中web主要是control层内容,service则对应service层,而MyBatis内容放在了service项目中,spring配置文件放在了web项目中.

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)

    后端篇 SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建[后端篇][快速生成后端代码.封装结果集.增删改查.模糊查找][毕设基础框架] 前端篇 创建vue项目 1.找个文件夹进入命令行,输入:vue create vue-front 2.直接回车,等待片刻,稍微有点小久 3.根据提示指令测试 打开浏览器输入:http://localhost:8080/ 安装所需工具 安装的工具会有点多,为了提供更好的拓展性,可以自主选择安装(不建议),后面的代码中都是使用到了,不安装

  • SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)

    数据库准备 data_test.sql: /* SQLyog Enterprise v12.08 (64 bit) MySQL - 5.7.31 : Database - data_test ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_

  • flask和vue前后端分离项目部署的示例代码

    前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下. 部署环境:centos6.5.Python3.6.3 .flask0.12.0 vue 部署方式:uwsgi+nginx 步骤: ​ 1.首先安装python运行环境,正常 ​ 2.安装uswsgi运行,正常(使用pip安装,pip install uwsgi): 新建config.ini文件 [uwsgi] # uwsgi 启动时所使用的地址与端口,ngin

  • Spring Boot + Vue 前后端分离项目如何踢掉已登录用户

    上篇文章中,我们讲了在 Spring Security 中如何踢掉前一个登录用户,或者禁止用户二次登录,通过一个简单的案例,实现了我们想要的效果. 但是有一个不太完美的地方,就是我们的用户是配置在内存中的用户,我们没有将用户放到数据库中去.正常情况下,松哥在 Spring Security 系列中讲的其他配置,大家只需要参考Spring Security+Spring Data Jpa 强强联手,安全管理只有更简单!一文,将数据切换为数据库中的数据即可. 本文是本系列的第十三篇,阅读前面文章有助

  • springboot+VUE前后端分离实现疫情防疫平台JAVA

    springboot+VUE前后端分离实现疫情防疫平台JAVA

    目录 主要模块: 系统主要实现如下: 登录之后进入系统首页:目前系统主要功能如下 用户管理模块:用户添加.修改.删除.查询等基本操作 角色管理模块.通过用户绑定角色.角色控制菜单显示.灵活控制菜单. 前端VUE代码添加菜单 菜单添加修改列表层操作 历史行程数据管理:添加修改删除等操作 用户每日健康打卡列表数据展示以及添加打卡信息 员工出行外出报备管理申请 员工复工申请 管理员审核 通知公告模块: 一些设计报告和文档描述参考 数据库连接: 主要模块: 管理员用户登录:用户登录. 用户信息: 用户信

  • Spring Boot和Vue前后端分离项目架构的全过程

    Spring Boot和Vue前后端分离项目架构的全过程

    目录 Spring Boot+Vue 前后端分离项目架构 1. SpringBoot 后端项目 2. Vue 前端项目 总结 Spring Boot+Vue 前后端分离项目架构 项目流程: 1. SpringBoot 后端项目 1.新建一个 SpringBoot 工程,并添加项目开发过程中需要的相关依赖: 2.数据库新建 book 数据表: -- ---------------------------- -- Table structure for book -- ---------------

随机推荐