首页 / VUE / vue2 前后端分离项目ajax跨域session问题解决方法

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue2 前后端分离项目ajax跨域session问题解决方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6496字，纯文字阅读大概需要10分钟。

内容图文

最近学习使用vuejs前后端分离，重构一个已有的后台管理系统，遇到了下面这个问题：

实现跨域请求时，每次ajax请求都是新的session，导致无法获取登录信息，所有的请求都被判定为未登陆。

1、 vuejs ajax跨域请求

最开始使用的是vue-resource，结果发现vue2推荐的是axios，于是改成axios；安装axios

npm install axios -S

安装完成后在main.js中增加一下配置：

import axios from 'axios';
axios.defaults.withCredentials=true;

main.js全部配置如下：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import router from './router';
import axios from 'axios';
import './assets/css/main.css'
import './assets/css/color-dark.css'

//开启debug模式
Vue.config.debug = true;
axios.defaults.withCredentials=true;
Vue.prototype.$axios = axios;
Vue.use(ElementUI);

new Vue(
  {
   router,
   el: '#app',
   render: h => h(App)
  }
).$mount('#app')

在XXX.vue文件中具体使用如下：

<template>

 <el-col :span="4" style="background-color: #eef1f6;height:100%;">
    <el-menu default-active="1" class="el-menu-vertical-demo" :unique-opened="uniqueOpened" router
     v-for="menu in menulist" :key="menu.fidStr">
      <template v-if="menu.isleaf === 1">
       <el-menu-item :index="menu.furl">{{menu.fname}}</el-menu-item>
      </template>
      <template v-else>
        <el-submenu :index="menu.fidStr">
         <template slot="title"><i class="el-icon-menu"></i>{{menu.fname}}</template>
         <template v-for="firstLevelChild in menu.children" >
          <template v-if="firstLevelChild.isleaf === 1" >
           <el-menu-item :index="firstLevelChild.furl">{{firstLevelChild.fname}}</el-menu-item>
          </template>
          <template v-else>
            <el-submenu :index="firstLevelChild.fidStr">
              <template slot="title"><i class="el-icon-menu"></i>{{firstLevelChild.fname}}</template>
              <el-menu-item v-for="secondLevelChild in firstLevelChild.children" :index="secondLevelChild.furl">
               {{secondLevelChild.fname}}
              </el-menu-item>
            </el-submenu>
         </template>
         </template>
        </el-submenu>
      </template>
    </el-menu>

  </el-col>

</template>

<script type="text/javascript">

export default {
   data() {
    return {
     uniqueOpened:true,
     menulist:[]
    }
   }   ,
   mounted: function() {
     let self = this;
     this.$axios.post('http://localhost:8080/test/xxx/xxxx', {}, {
       headers: {
        "Content-Type":"application/json;charset=utf-8"
       },
       withCredentials : true
     }).then(function(response) {
       // 这里是处理正确的回调
       let result = response.data.result;
       if (0 == result) {
        self.menulist = response.data.item.menulist;
       } else if (11 == result || 9 == result) {
        self.$router.push('/login');
       } else {
        console.log(response.data);
       }

     }).catch( function(response) {
       // 这里是处理错误的回调
       console.log(response)
     });
   }
 }

</script>

<style scoped>
  .sidebar{
    display: block;
    position: absolute;
    width: 200px;
    left: 0;
    top: 70px;
    bottom:0;
    background: #2E363F;
  }
  .sidebar > ul {
    height:100%;
  }
</style>

在后台项目中的登陆拦截器中设置了，接受跨域访问的header，如下：

public class LoginInterceptor extends HandlerInterceptorAdapter {

  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
      throws Exception {
    
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, accept, content-type, xxxx");
    response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
    response.setHeader("Access-Control-Allow-Origin", "*"); 
    
    
    return true;
  }
｝

现在可以就可以跨域访问了。

2、登陆session获取

因为是后台管理系统，肯定都需要需要登陆，才能用的，因此我在登陆时保存了session

//登陆成功
session.setAttribute("user", obj);

我希望其它请求进来时，在拦截器中判断是否登陆了，是否有权限访问这个请求路径

    //拦截器中增加，获取session代码
    HttpSession session =request.getSession();
    System.out.println("拦截器中的session的id是====" + session.getId());
    Object obj = session.getAttribute("user");

结果发现，每次ajax跨域访问都是新的session ，每次的sessionID都不一样

在segmentfault上提了一个问题，有人提示需要让ajax请求携带cookie，也就是认证信息，于是在拦截器中，增加了一个需要认证信息的header：

response.setHeader("Access-Control-Allow-Credentials", "true");

然后再次在浏览器中测试，发现浏览器提示，当Access-Control-Allow-Credentials设为true的时候，Access-Control-Allow-Origin不能设为星号，既然不让我设为星号，我就改成前端项目的配置

response.setHeader("Access-Control-Allow-Origin", http://127.0.0.1:8010);

发现每次ajax请求，还是不同的session，打开chrome的network，发现每次请求的请求头中并没有，和我想象的一样携带cookie信息，也就是下面这个header：

Cookie:JSESSIONID=node015f4w1j2kgjk61i7jyyim8lo3u0.node0;

因为我用的axios，所以找到axios的文档链接描述

发现一下内容：

 // `timeout` specifies the number of milliseconds before the request times out.
 // If the request takes longer than `timeout`, the request will be aborted.
 timeout: 1000,

 // `withCredentials` indicates whether or not cross-site Access-Control requests
 // should be made using credentials
 withCredentials: false, // default

 // `adapter` allows custom handling of requests which makes testing easier.
 // Return a promise and supply a valid response (see lib/adapters/README.md).
 adapter: function (config) {
  /* ... */
 },

withCredentials默认是false，意思就是不携带cookie信息，那就让它为true，我是全局性配置的，就是main.js中的这句话：

axios.defaults.withCredentials=true;

然后再测试，发现每次ajax请求都是同样的session了（不包含浏览器的options请求）。

3、代理配置

因为不想每个页面里的请求都写http://127.0.0.1:8080，并且我用的是element ui的webpack项目模板，所以就想使用代理（不知道叫这个合适不合适）：

devServer: {
  host: '127.0.0.1',
  port: 8010,
  proxy: {
   '/api/': {
    target: 'http://127.0.0.1:8080',
    changeOrigin: true,
    pathRewrite:{
          '/api':'/xxxxxx'
        }
   }
  }

把ajax请求改成下面这个样子：

this.$axios.post('/api/xx/xxx', {}, {
      headers: {
        "Content-Type": "application/json;charset=utf-8"
      }     
    }).then(function(response) {
      // 这里是处理正确的回调     

    }).catch(function(response) {
      // 这里是处理错误的回调
      console.log(response)
    });

网上说都是配置为proxyTable, 用的是http-proxy-middleware这个插件，我装上插件，改成这个，webpack总是报错，说proxyTable是非法的配置，无法识别。

无奈改成了模板自带的proxy，可以使用，为什么可以用，我还不请求，proxyTabel为什么不能用，也没搞明白。有知道的，可以指点一下。

虽然代理配置好了，也能正常请求，结果发现请求的session又不一样了，感觉心好累啊！！！

没办法，只能再看请求头是不是有问题，发现返回header中有session限制的，如下：

代码如下:
set-cookie:JSESSIONID=node0v5dmueoc119rb42b59k5qf3w0.node0;Path=/xxxx

要求cookie只能再/xxxx下也就是项目的根路径下使用，于是我把代理改成：

devServer: {
  host: '127.0.0.1',
  port: 8010,
  proxy: {
   '/xxxx/': {
    target: 'http://127.0.0.1:8080',
    changeOrigin: true
   }
  }

session又恢复正常了，可以用了；不知道为什么配成api映射的形式为什么不能用。

这就是解决这个跨域session问题的过程，希望对大家有点帮助！也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的vue2 前后端分离项目ajax跨域session问题解决方法全部内容，希望文章能够帮你解决vue2 前后端分离项目ajax跨域session问题解决方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/344095.html

来源：【匿名】

【上一篇】Vue.js在使用中的一些注意知识点【下一篇】php怎么返回数据给vue

更多 ►

【vue2 前后端分离项目ajax跨域session问题解决方法】教程文章相关的互联网学习教程文章

4.Vue跨域session问题解决

1.设置koa2服务器从本地代理转发修改:项目/config/index.js-->dev中proxyTable: { ‘/api‘: { target: ‘http://localhost:3000‘, changeOrigin: true, pathRewrite: { //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段 ‘^/api/‘: ‘‘ } } },//--------------------------------------------------dev: { e...

vuex存储和本地存储(localstorage、sessionstorage)的区别

区别及适用场景1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。 2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。注：很...

express+vue+mongodb+session 实现注册登录【代码】【图】

上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能，那么今天是在那个基础之上做了扩展，首先实现的功能有如下：1. 支持注册，登录功能，用户可以注册完成后，进行登录，登录完成后会进入到列表增删改查页面。2. 支持session会话，也就是说设置了多长时间登录过期，如果用户没有登录，直接进查询列表页面，会重定向到登录页面去，如果用户登录了后，把浏览器关掉，直接输入列表查询页面，会直...

在Vue中有关于localstorage和sessionstorage如何使用

这篇文章主要介绍了详解Vue中localstorage和sessionstorage的使用方法和经验心得，有需要的朋友跟着小编参考学习下吧。1. 项目使用中暴露出来的几个问题大家到处直接使用localstorage[aaa]=这是一段示例字符串这些原生语法实现，这样耦合度太高了，假如有一天我们需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多项目很大，那么大家起的key的名字难免会重复，而且这样也会造成全局污染因为localstorage的使用...

localstorage和sessionstorage在Vue中怎么使用

这次给大家带来localstorage和sessionstorage在Vue中怎么使用，localstorage和sessionstorage在Vue中使用的注意事项有哪些，下面就是实战案例，一起来看一下。1. 项目使用中暴露出来的几个问题大家到处直接使用localstorage[aaa]=这是一段示例字符串这些原生语法实现，这样耦合度太高了，假如有一天我们需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多项目很大，那么大家起的key的名字难免会重复，而且这样...

vue+koa2实现session、token登陆状态验证的示例

Session 登陆与 Token 登陆的区别1、Session 登陆是在服务器端生成用户相关 session 数据，发给客户端 session_id 存放到 cookie 中，这样在客户端请求时带上 session_id 就可以验证服务器端是否存在 session 数据，以此完成用户认证。这种认证方式，可以更好的在服务端对会话进行控制，安全性比较高(session_id 随机），但是服务端需要存储 session 数据(如内存或数据库），这样无疑增加维护成本和减弱可扩展性(多台服务器)。 CSR...

解决前后端分离 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浏览器无法保存，而且...

express+vue+mongodb+session 实现注册登录功能【图】

主要实现如下功能： 1. 支持注册，登录功能，用户可以注册完成后，进行登录，登录完成后会进入到列表增删改查页面。 2. 支持session会话，也就是说设置了多长时间登录过期，如果用户没有登录，直接进查询列表页面，会重定向到登录页面去，如果用户登录了后，把浏览器关掉，直接输入列表查询页面，会直接进入列表页面的。 3. 列表数据加入了分页功能。 4. 对数据库中的请求加入了日志记录。先看下效果：1. 首先服务器重启后，在地址...

vue中使用sessionStorage记住密码功能【图】

sessionStorage和localStorage比较二者区别 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 localStorage和sessionStorage操作 localStorage和sessionStorage都具有相同的操作方法，例...

使用sessionStorage解决vuex在页面刷新后数据被清除的问题【图】

1.原因2.解决方法localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度我这里使用sessionStorage，这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化 3.具体实现应用背景...

详解Vue中localstorage和sessionstorage的使用

1. 项目使用中暴露出来的几个问题大家到处直接使用localstorage[aaa]=这是一段示例字符串这些原生语法实现，这样耦合度太高了，假如有一天我们需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多项目很大，那么大家起的key的名字难免会重复，而且这样也会造成全局污染因为localstorage的使用不规范，所以造成了存储空间的浪费和不够用2. 解决办法封装storage的使用方法，统一处理规范storage的key值的命名规...