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.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>