最近學習使用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>