首页 >> js开发 >> jsVue使用axios引起的后台session不同操作js大全
jsVue使用axios引起的后台session不同操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
新项目前端用的Vue全家桶，使用axios代替ajax请求后台接口，在调整注册接口的时候，发现在session里取不到验证码，排查后才知道获取验证码和注册两个请求的session不同，sessionId不一样。现在调整一下Vue的配置，修改main.js文件，添加如下两行代码
import axios from 'axios'
axios.defaults.withCredentials=true;
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'
// 默认false 会导致后台接收到的同一用户的不同请求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: '
})
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'
// 默认false 会导致后台接收到的同一用户的不同请求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: '
})同时后台也需要配合修改，后台用的是Spring Boot，下面是修改后的结果
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
// 设置setAllowCredentials = true后就不能设置为*了，要设置具体的
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();
// 对接口配置跨域设置
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
// 设置setAllowCredentials = true后就不能设置为*了，要设置具体的
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();
// 对接口配置跨域设置
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}这是一个允许跨越请求的类设置设置
corsConfiguration.setAllowCredentials(true);
corsConfiguration.setAllowCredentials(true);设置了上行代码后，addAllowedOrigin设置成*就不允许了
corsConfiguration.addAllowedOrigin("*")
corsConfiguration.addAllowedOrigin("*")需要设置成指定的地址
corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");
corsConfiguration.addAllowedOrigin("http://localhost:8080");
corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");corsConfiguration.addAllowedOrigin("http://localhost:8080");这样就ok了！补充知识：vue axios sessionID 每次请求都不同的原因，及修改方式补充知识：补充知识：vue axios sessionID 每次请求都不同的原因，及修改方式今天应项目需要，需要在请求当中加入sessionID的验证，但是发现每一次发送给后台的请求当中，sessionID都是不一样的，那么原因是什么呢？查阅度娘之后，发现自己封装的axios配置文件当中，缺少了一行：
import axios from 'axios'
axios.defaults.withCredentials = true
import axios from 'axios'axios.defaults.withCredentials = true这是axios的文档： https://www.kancloud.cn/yunye/axios/234845https://www.kancloud.cn/yunye/axios/234845
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的
// `withCredentials` 表示跨域请求时是否需要使用凭证withCredentials: false, // 默认的在我封装的axios请求当中，是没有 withCredentials的配置的， 如果没有配置为true，默认为false则向后台发送的请求当中不携带cookie信息，如此每一次sessionID自然会不同。而再加入这一行配置之后，再次测试，发现出现新的的问题：
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.
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.这个时候，就需要后台的同事帮忙了，在后台的跨域请求头配置当中，进行如下两行的配置：
response.setHeader("Access-Control-Allow-Origin", "*");// 不能是通配符*
response.setHeader("Access-Control-Allow-Origin", "*");// 不能是通配符*而是：作用是将访问接口才ip注册进去。第二个配置是：
Access-Control-Allow-Credentials: true
Access-Control-Allow-Credentials: true若是不设置成这个，也会出错。而这样前后都设置完毕之后，再次请求，你会发现，还是出错了，那是因为，你需要在修改一个地址
host: 'localhost', // 这里要修改为你本机的ip地址，那少年，你就成功了
port: 8080, // 端口
autoOpenBrowser: false,
host: 'localhost', // 这里要修改为你本机的ip地址，那少年，你就成功了
port: 8080, // 端口
autoOpenBrowser: false,以上这篇Vue使用axios引起的后台session不同操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
import axios from 'axios'
axios.defaults.withCredentials=true;
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'
// 默认false 会导致后台接收到的同一用户的不同请求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: '
})
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'
// 默认false 会导致后台接收到的同一用户的不同请求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: '
})同时后台也需要配合修改，后台用的是Spring Boot，下面是修改后的结果
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
// 设置setAllowCredentials = true后就不能设置为*了，要设置具体的
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();
// 对接口配置跨域设置
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
// 设置setAllowCredentials = true后就不能设置为*了，要设置具体的
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();
// 对接口配置跨域设置
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}这是一个允许跨越请求的类设置设置
corsConfiguration.setAllowCredentials(true);
corsConfiguration.setAllowCredentials(true);设置了上行代码后，addAllowedOrigin设置成*就不允许了
corsConfiguration.addAllowedOrigin("*")
corsConfiguration.addAllowedOrigin("*")需要设置成指定的地址
corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");
corsConfiguration.addAllowedOrigin("http://localhost:8080");
corsConfiguration.addAllowedOrigin("http://192.168.0.35:8080");corsConfiguration.addAllowedOrigin("http://localhost:8080");这样就ok了！补充知识：vue axios sessionID 每次请求都不同的原因，及修改方式补充知识：补充知识：vue axios sessionID 每次请求都不同的原因，及修改方式今天应项目需要，需要在请求当中加入sessionID的验证，但是发现每一次发送给后台的请求当中，sessionID都是不一样的，那么原因是什么呢？查阅度娘之后，发现自己封装的axios配置文件当中，缺少了一行：
import axios from 'axios'
axios.defaults.withCredentials = true
import axios from 'axios'axios.defaults.withCredentials = true这是axios的文档： https://www.kancloud.cn/yunye/axios/234845https://www.kancloud.cn/yunye/axios/234845
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的
// `withCredentials` 表示跨域请求时是否需要使用凭证withCredentials: false, // 默认的在我封装的axios请求当中，是没有 withCredentials的配置的， 如果没有配置为true，默认为false则向后台发送的请求当中不携带cookie信息，如此每一次sessionID自然会不同。而再加入这一行配置之后，再次测试，发现出现新的的问题：
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.
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.这个时候，就需要后台的同事帮忙了，在后台的跨域请求头配置当中，进行如下两行的配置：
response.setHeader("Access-Control-Allow-Origin", "*");// 不能是通配符*
response.setHeader("Access-Control-Allow-Origin", "*");// 不能是通配符*而是：作用是将访问接口才ip注册进去。第二个配置是：
Access-Control-Allow-Credentials: true
Access-Control-Allow-Credentials: true若是不设置成这个，也会出错。而这样前后都设置完毕之后，再次请求，你会发现，还是出错了，那是因为，你需要在修改一个地址
host: 'localhost', // 这里要修改为你本机的ip地址，那少年，你就成功了
port: 8080, // 端口
autoOpenBrowser: false,
host: 'localhost', // 这里要修改为你本机的ip地址，那少年，你就成功了
port: 8080, // 端口
autoOpenBrowser: false,以上这篇Vue使用axios引起的后台session不同操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
