vue解决服务器Session不一致问题(跨域问题)
2021-05-02 19:11
519 查看
最近在做项目时,发现vue前端的登录接口使用axios连接服务器实现登录功能时,每次请求后端服务器所保存的Session对象id都不相同,也就是说前端请求服务器所得到的Seesion对象无法保存下来。
上网查询后发现是跨域问题,也就是说请求的发出点的URL与所请求的URL不同源。(所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port))。
那么如何解决跨域问题呢,目前网络上主要有两种解决方案:
1.允许使用cookie,携带session信息,保持session的一致性。(大概率无法解决问题)
在vue项目中的main.js中添加(前提是以引用axios):
axios.defaults.withcredentials = true; //允许使用cookie
在后端代码中同样允许使用cookie(以SpringMVC为例)
//作为Controller类的注解 @CrossOrigin(origins ="http://localhost:8081",allowCredentials = "true") //允许跨域,同时允许使用cookie
2.使用 vue proxy 代理——将不同源的URL通过代理更改为同源(大概率能解决问题)
以vue-cli3为例,在vue项目根目录下创建配置文件vue.config.js(与package.json同级),在配置文件中添加以下代码:
module.exports = { //相当于webpack-dev-server, 对本地服务器进行配置 devServer : { proxy: { //以“/a”作为开头的axios请求都会进行代理 "/a" : { target: "http://localhost:8080", //请求目标服务器的url changeOrigin: true, //是否跨域(选为true) pathRewrite: { "^/a" : "" //将axios请求url中的/a进行重写 } } } } //通过以上配置,对于axios请求:/a/login 将会被代理成 http://localhost:8080/login }
相关文章推荐
- 解决跨域,session不一致问题
- Node学习(4)vue+node 前后端分离项目ajax跨域session问题解决
- 解决axios跨域问题,解决跨域请求sessionId不一致问题
- 使用SpringSession时cookies跨域导致Session不一致问题的解决
- vue前后端分离使用fetch 跨域请求时 session失效问题解决
- SpringMVC解决跨域问题,以及跨服务器调用时候session丢失的问题总结!!!
- 解决Vue开发过程中与后台服务器跨域问题
- springboot+vue踩坑又爬坑之路(跨域、session不一致、vue代理、403问题)
- SpringMVC解决跨域问题,以及跨服务器调用时候session丢失的问题总结!!!
- 如何实现Vue前端跨域,proxyTable解决开发环境下前端跨域问题
- vue+springboot前后端分离实现单点登录跨域问题解决方法
- Nginx解决Vue项目中跨域问题
- Vue用axios请求数据proxyTable解决跨域问题
- 使用 vue + springboot 前后端分离 跨域、cookie、session 问题,全套配置一篇就够了
- cas ajax登录方式跨域时session丢失问题解决
- IFrame引用跨域站点页面时,Session失效问题解决
- android 关于发起不同网络请求与服务器session不一致问题
- 转 memcache保存php的session 解决多服务器的session问题
- vue.js vue-cli 中解决 axios 跨域调用的问题
- Vue-cli proxyTable 解决开发环境的跨域问题