如何解決vue2中前后端分離項(xiàng)目ajax跨域session的問(wèn)題

這篇文章將為大家詳細(xì)講解有關(guān)如何解決vue2中前后端分離項(xiàng)目ajax跨域session的問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

實(shí)現(xiàn)跨域請(qǐng)求時(shí)，每次ajax請(qǐng)求都是新的session，導(dǎo)致無(wú)法獲取登錄信息，所有的請(qǐng)求都被判定為未登陸。

1、 vuejs ajax跨域請(qǐng)求

最開(kāi)始使用的是vue-resource，結(jié)果發(fā)現(xiàn)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'

//開(kāi)啟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" >
    <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) {
       // 這里是處理正確的回調(diào)
       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) {
       // 這里是處理錯(cuò)誤的回調(diào)
       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>

在后臺(tái)項(xiàng)目中的登陸攔截器中設(shè)置了，接受跨域訪問(wèn)的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;
  }
｝

現(xiàn)在可以就可以跨域訪問(wèn)了。

2、登陸session獲取

因?yàn)槭呛笈_(tái)管理系統(tǒng)，肯定都需要需要登陸，才能用的， 因此我在登陸時(shí)保存了session

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

我希望其它請(qǐng)求進(jìn)來(lái)時(shí)，在攔截器中判斷是否登陸了，是否有權(quán)限訪問(wèn)這個(gè)請(qǐng)求路徑

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

結(jié)果發(fā)現(xiàn)，每次ajax跨域訪問(wèn)都是新的session ，每次的sessionID都不一樣

在segmentfault上提了一個(gè)問(wèn)題，有人提示需要讓ajax請(qǐng)求攜帶cookie，也就是認(rèn)證信息，于是在攔截器中，增加了一個(gè)需要認(rèn)證信息的header：

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

然后再次在瀏覽器中測(cè)試，發(fā)現(xiàn)瀏覽器提示，當(dāng)Access-Control-Allow-Credentials設(shè)為true的時(shí)候，Access-Control-Allow-Origin不能設(shè)為星號(hào)，既然不讓我設(shè)為星號(hào)，我就改成前端項(xiàng)目的配置

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

發(fā)現(xiàn)每次ajax請(qǐng)求，還是不同的session，打開(kāi)chrome的network，發(fā)現(xiàn)每次請(qǐng)求的請(qǐng)求頭中并沒(méi)有，和我想象的一樣攜帶cookie信息，也就是下面這個(gè)header：

Cookie:JSESSIONID=node015f4w1j2kgjk61i7jyyim8lo3u0.node0;

因?yàn)槲矣玫腶xios，所以找到axios的文檔鏈接描述

發(fā)現(xiàn)一下內(nèi)容：

 // `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默認(rèn)是false，意思就是不攜帶cookie信息，那就讓它為true，我是全局性配置的，就是main.js中的這句話：

axios.defaults.withCredentials=true;

然后再測(cè)試，發(fā)現(xiàn)每次ajax請(qǐng)求都是同樣的session了（不包含瀏覽器的options請(qǐng)求）。

3、代理配置

因?yàn)椴幌朊總€(gè)頁(yè)面里的請(qǐng)求都寫(xiě)http://127.0.0.1:8080，并且我用的是element ui的webpack項(xiàng)目模板，所以就想使用代理（不知道叫這個(gè)合適不合適）：

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

把a(bǔ)jax請(qǐng)求改成下面這個(gè)樣子：

this.$axios.post('/api/xx/xxx', {}, {
      headers: {
        "Content-Type": "application/json;charset=utf-8"
      }     
    }).then(function(response) {
      // 這里是處理正確的回調(diào)     

    }).catch(function(response) {
      // 這里是處理錯(cuò)誤的回調(diào)
      console.log(response)
    });

網(wǎng)上說(shuō)都是配置為proxyTable, 用的是http-proxy-middleware這個(gè)插件，我裝上插件，改成這個(gè)，webpack總是報(bào)錯(cuò)，說(shuō)proxyTable是非法的配置，無(wú)法識(shí)別。

無(wú)奈改成了模板自帶的proxy，可以使用，為什么可以用，我還不請(qǐng)求，proxyTabel為什么不能用，也沒(méi)搞明白。有知道的，可以指點(diǎn)一下。

雖然代理配置好了，也能正常請(qǐng)求，結(jié)果發(fā)現(xiàn)請(qǐng)求的session又不一樣了，感覺(jué)心好累?。。?！

沒(méi)辦法，只能再看請(qǐng)求頭是不是有問(wèn)題，發(fā)現(xiàn)返回header中有session限制的，如下：

復(fù)制代碼 代碼如下:

set-cookie:JSESSIONID=node0v5dmueoc119rb42b59k5qf3w0.node0;Path=/xxxx

要求cookie只能再/xxxx下也就是項(xiàng)目的根路徑下使用，于是我把代理改成：

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

session又恢復(fù)正常了，可以用了；不知道為什么配成api映射的形式為什么不能用。

關(guān)于“如何解決vue2中前后端分離項(xiàng)目ajax跨域session的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。