vue-element-admin+Axios跨域请求session不一致问题

最新推荐文章于 2023-03-10 07:58:23 发布
最新推荐文章于 2023-03-10 07:58:23 发布
阅读量707 收藏 1
点赞数
分类专栏： JavaWeb 文章标签： vue.js javaweb spring boot vue-cli3 session
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45735233/article/details/120817306
版权

vue-element-admin+Axios跨域请求session不一致问题

场景复现

前端：Vue-Cli + Axios + Node.js + vue-element-admin

后端：Spring Boot

数据库：MySQL + Redis

在做用户注册的验证码功能的时候，前端发起请求，后端生成验证码图片发送到前端，并将验证码字符串存放到session中，但是在前端输入表单发送注册请求的时候，一直显示注册失败，通过调试发现两次请求的SessionID不同。

解决步骤

  1. 设置proxy代理（根目录下 vue.config.js 文件，没有就新建一个）

    module.exports = {
     
　　　　devServer: {
     
　　// 设置代理
　　　　　　proxy: {
     
　　　　　
最低0.47元/天 解锁文章
Jancoyan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue-cli3.x + axios 跨域方案踩坑指北
10-16
在开发过程中，由于浏览器的同源策略限制，前端应用（通常运行在本地开发服务器，如 `webpack.devServer`）在访问不同源的后端API时会遇到跨域问题。Vue-cli 3.x 提供了一个解决方案，即使用 `axios` 进行数据请求，...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
element-admin中解决axios跨域问题
weixin_44846723的博客
09-20 810
1、在项目 文件中创建一个vue.config.js文件，与src文件同级 2、找到Vue CLI 中的配置参考-链接->devServer.proxy模块 module.exports = { devServer: { proxy: { // '/': { //此处'/'相当于target这个地址 target: 'http://loca...
解决vue项目axios每次请求session不一致的问题
01-18
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' import router from './router' require('es6-promise')
解决跨域造成Vue-element每次请求sessionID不同问题
supramolecular的博客
10-25 5826
vue-element作为前端开发框架, 前后端分离项目ajax跨域, 每次http请求后sessionId均会发生变化,导致获取session失败, 只需要在文件vue-element-admin-master-1\src\utils\request.js中添加如下代码即可: withCredentials: true, crossDomain: true 整个axios请求为:...
element-ui跨域session失效解决方案
zalan01408980的博客
07-24 650
最终还是遇到了跨域问题，经过一下午的各种尝试终于成功的掉到了想要的东西，下面就来写一下是如何实现的，也算是给后来者填个坑： 你需要做一个反向代理的东西打开你的vue项目的config文件夹下的index.js 然后找到以下的代码： config/dev.env.js： 当然不管是开发还是生产环境都可以直接请求http://10.1.5.11:8080//。配置好之后测试时程序会...
Vue使用axios跨域出错解决方案
我家有只小金毛的博客
10-06 1802
Vue使用axios跨域出错解决方案        在 Vue+SpringBoot 的前后端分离项目中，经常使用 axios 来解决跨域问题。但有时候配置错误，经常会出现问题，做登录模块时在下就遭了道！ 前端 Vue 配置如下： 在config文件夹中的 index.js 文件中找到proxyTable属性，添加如下代码 proxyTable: { // 跨域支持 '/api': {
vue.js+axios访问服务器session丢失问题
qq_40007317的博客
05-02 1341
1
基于Vue+Vue-router+Vuex+Element-ui+Axios商城
06-27
本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
关于 axios.defaults.withCredentials = true 不生效问题
GASG的博客
06-07 8256
关于 axios.defaults.withCredentials = true 不生效问题 在Vue开发过程中，跨域一直是无法避免的问题，跨域的解决可以通过： 后端设置允许跨域 前端设置反向代理 来进行解决，相关方法在百度上有很多，直接百度Ctrl+C``Ctrl+V即可。 但是关于在VUE项目中，后端使用SESSION的问题，因为后端使用SESSION是服务器端与浏览器端需要靠cookie的传递来实现鉴权识别，通过服务端在返回时发送set-cookie来自动设置到浏览器的cookie中，然后再之后请求
上传文件的输出日志信息
qq_34412985的博客
09-10 2392
2020-09-01 15:43:29.809 INFO com.pc.data.governance.aop.ControllerAopWithBdap Line:61 - 请求路径是===>>>/standardMapping/uploadData请求方法是===>>>public java.lang.Object com.pc.data.ds.controller.StandardMappingUploadAndDownloadController.upload..
【开发心得】Vue axios跨域携带cookie
清风唱诗人的博客
05-12 1018
前端配置 axios默认发送请求是不携带cookie的，所以需要加上下面这句axios.defaults.withCredentials=true; importaxiosfrom'axios'; axios.defaults.withCredentials=true;//允许携带cookie //创建axios实例 constservice=axios.create({ baseURL:process.env.VUE_APP_API_SERVER_ADDRES...
前端跨域配置 axios.defaults.withCredentials = true； 无效的原因
Charonmomo的博客
02-08 1万+
背景 前后端分离项目, 后端返回cookie的方式如下: 在前端配置了 withCredentials = true : axios.defaults.withCredentials = true; 但是cookie信息不能被浏览器保存下来. 虽然登陆接口返回了200, 但是登录实际上是无效的. 这时候登陆接口的一些信息: 原因 网上的文章提到: 如果要发送Cookie，Access-Control-Allow-Origin 就不能设为星号，必须指定明确的、与请求网页一致的域名。 再看上面的
vue-element-admin登录流程
热门推荐
兔子零
09-24 4万+
1.安装最新的vue-element-admin; 2.如有需要可以去掉eslint;在下面这个文件里面全局搜索 3.删除所有的eslint文件 4.开始安装依赖包， npm install 5.启动服务:npm run dev ,但是打开的是两个窗口，需要把open设置为false; 6.进入登录页面： 7.后端编写登录接口（这里以java为列）: 验证码根据需求来进行设置; 8....
企业级后台集成方案vue-element-admin
程序猿追的博客
03-10 2万+
vue-element-admin 是一个后台前端解决方案，它基于 vue和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
vue中登录成功后台自动将token保存进入session缓存，解决前端每次生成的token不同与后端保存的不一致，无法访问下一个接口的问题
李小乐er
07-30 1万+
这个问题，真心是一个深坑，搞了一天 本来以为是跨域问题。结果最后发现是token不同导致 解决方法：在main.js或者封装的axios中引入 axios.defaults.withCredentials = true; 表示跨域请求时，使用凭证 允许后台在header响应头中带参数接收 这样就可以保证token一致 没错，就是简简单单一条语句，就解决掉了这个问题。...
快速搭建vue后台权限管理vue-element-admin
lilongwei4321的博客
07-23 3万+
下载https://github.com/CaiBaoHong/biu biu/browser为前端vue项目，初始化项目（npm install） 启动服务 （npm run dev），可以看到系统管理下的权限配置添加页面后需同步权限元数据也可配置按钮权限 biu/browser/src/components/ 目录下有多种组件（echart、Excel、图片上传等） 请求接口可在src...
前端vue毕设项目【易购商城】vue + vuex + vue-router + element ui + axios + vu
最新发布
08-25
易购商城是一个基于Vue框架开发的前端毕设项目。在该项目中，我使用了Vue、Vuex、Vue Router、Element UI、Axios等技术和库来实现各种功能。 首先，Vue是一种流行的前端框架，它具有响应式的数据绑定和组件化的特性，使得开发者可以轻松构建交互性强、高效的单页面应用。 其次，我使用了Vuex来管理应用的状态。Vuex提供了一种集中式的状态管理方案，帮助我管理和共享全局的数据，使得不同组件之间的通信更加便捷。 Vue Router是Vue官方提供的路由管理库，用于实现页面之间的导航和路由跳转。我使用它来定义和管理不同页面之间的跳转逻辑，使得用户可以通过URL来访问和导航各个页面。 Element UI是一套基于Vue的桌面端组件库，它提供了丰富的UI组件和样式，使得我可以快速构建出美观和功能完善的界面。 为了与后端进行数据交互，我使用了Axios库。Axios是一个基于Promise的HTTP客户端，可以在前端与后端进行异步数据交互，使得用户可以实现登录、注册、添加购物车、结算等功能。 最后，我还使用了Vue插件vue-echarts和vue-awesome-swiper来实现商品数据的可视化展示和轮播图功能。这些插件都提供了强大且易用的功能，使得易购商城的用户界面更加丰富和吸引人。 总体来说，通过使用Vue、Vuex、Vue Router、Element UI、Axios等技术和库，我成功地实现了易购商城的前端开发工作，提供了丰富的功能和良好的用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值