解決Vue使用axios引起的后臺session不同操作的問題

這篇文章給大家分享的是有關(guān)解決Vue使用axios引起的后臺session不同操作的問題的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

新項(xiàng)目前端用的Vue全家桶，使用axios代替ajax請求后臺接口，在調(diào)整注冊接口的時(shí)候，發(fā)現(xiàn)在session里取不到驗(yàn)證碼，排查后才知道獲取驗(yàn)證碼和注冊兩個(gè)請求的session不同，sessionId不一樣。

現(xiàn)在調(diào)整一下Vue的配置，修改main.js文件，添加如下兩行代碼

import axios from 'axios'

axios.defaults.withCredentials=true;

修改后

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
// 默認(rèn)false 會(huì)導(dǎo)致后臺接收到的同一用戶的不同請求sessionid都不同,需要改為true
axios.defaults.withCredentials=true;
 
Vue.config.productionTip = false
Vue.use(ElementUI)
  /* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

同時(shí)后臺也需要配合修改，后臺用的是Spring Boot，下面是修改后的結(jié)果

@Configuration
public class CorsConfig {
  private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.setAllowCredentials(true);
    // 設(shè)置setAllowCredentials = true后就不能設(shè)置為*了，要設(shè)置具體的
    corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");
    corsConfiguration.addAllowedOrigin("http://localhost:8080");
    // 允許任何頭
    corsConfiguration.addAllowedHeader("*");
    // 允許任何方法（post、get等）
    corsConfiguration.addAllowedMethod("*");
    return corsConfiguration;
  }
 
  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    // 對接口配置跨域設(shè)置
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
  }
}

這是一個(gè)允許跨越請求的類

設(shè)置

corsConfiguration.setAllowCredentials(true);

設(shè)置了上行代碼后，addAllowedOrigin設(shè)置成*就不允許了

corsConfiguration.addAllowedOrigin("*")

需要設(shè)置成指定的地址

corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");

corsConfiguration.addAllowedOrigin("http://localhost:8080");

這樣就ok了！

補(bǔ)充知識：vue axios sessionID 每次請求都不同的原因，及修改方式

今天應(yīng)項(xiàng)目需要，需要在請求當(dāng)中加入sessionID的驗(yàn)證，但是發(fā)現(xiàn)每一次發(fā)送給后臺的請求當(dāng)中，sessionID都是不一樣的，那么原因是什么呢？

查閱度娘之后，發(fā)現(xiàn)自己封裝的axios配置文件當(dāng)中，缺少了一行：

import axios from 'axios'

axios.defaults.withCredentials = true

這是axios的文檔： https://www.kancloud.cn/yunye/axios/234845

// `withCredentials` 表示跨域請求時(shí)是否需要使用憑證

withCredentials: false, // 默認(rèn)的

在我封裝的axios請求當(dāng)中，是沒有 withCredentials的配置的， 如果沒有配置為true，默認(rèn)為false則向后臺發(fā)送的請求當(dāng)中不攜帶cookie信息，如此每一次sessionID自然會(huì)不同。

而再加入這一行配置之后，再次測試，發(fā)現(xiàn)出現(xiàn)新的的問題：

Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

這個(gè)時(shí)候，就需要后臺的同事幫忙了，在后臺的跨域請求頭配置當(dāng)中，進(jìn)行如下兩行的配置：

response.setHeader("Access-Control-Allow-Origin", "*");// 不能是通配符*

而是：

作用是將訪問接口才ip注冊進(jìn)去。

第二個(gè)配置是：

Access-Control-Allow-Credentials: true

若是不設(shè)置成這個(gè)，也會(huì)出錯(cuò)。

而這樣前后都設(shè)置完畢之后，再次請求，你會(huì)發(fā)現(xiàn)，還是出錯(cuò)了，那是因?yàn)?，你需要在修改一個(gè)地址

 host: 'localhost', // 這里要修改為你本機(jī)的ip地址，那少年，你就成功了
 port: 8080, // 端口
 autoOpenBrowser: false,

感謝各位的閱讀！關(guān)于解決Vue使用axios引起的后臺session不同操作的問題就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！