直播网站基础建设,wordpress家具主题,wordpress解密,哪里设计公司vi最近学习使用vuejs前后端分离#xff0c;重构一个已有的后台管理系统#xff0c;遇到了下面这个问题#xff1a;实现跨域请求时#xff0c;每次ajax请求都是新的session#xff0c;导致无法获取登录信息#xff0c;所有的请求都被判定为未登陆。1、 vuejs ajax跨域请求最…最近学习使用vuejs前后端分离重构一个已有的后台管理系统遇到了下面这个问题实现跨域请求时每次ajax请求都是新的session导致无法获取登录信息所有的请求都被判定为未登陆。1、 vuejs ajax跨域请求最开始使用的是vue-resource结果发现vue2推荐的是axios于是改成axios安装axiosnpm install axios -S安装完成后在main.js中增加一下配置import axios from axios;axios.defaults.withCredentialstrue;main.js全部配置如下import Vue from vueimport App from ./App.vueimport ElementUI from element-uiimport element-ui/lib/theme-default/index.cssimport router from ./router;import axios from axios;import ./assets/css/main.cssimport ./assets/css/color-dark.css//开启debug模式Vue.config.debug true;axios.defaults.withCredentialstrue;Vue.prototype.$axios axios;Vue.use(ElementUI);new Vue({router,el: #app,render: h h(App)}).$mount(#app)在XXX.vue文件中具体使用如下v-formenu in menulist :keymenu.fidStr{{menu.fname}}{{menu.fname}}{{firstLevelChild.fname}}{{firstLevelChild.fname}}{{secondLevelChild.fname}}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;charsetutf-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)});}}.sidebar{display: block;position: absolute;width: 200px;left: 0;top: 70px;bottom:0;background: #2E363F;}.sidebar ul {height:100%;}在后台项目中的登陆拦截器中设置了接受跨域访问的header如下public class LoginInterceptor extends HandlerInterceptorAdapter {Overridepublic 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;}现在可以就可以跨域访问了。2、登陆session获取因为是后台管理系统肯定都需要需要登陆才能用的 因此我在登陆时保存了session//登陆成功session.setAttribute(user, obj);我希望其它请求进来时在拦截器中判断是否登陆了是否有权限访问这个请求路径//拦截器中增加获取session代码HttpSession session request.getSession();System.out.println(拦截器中的session的id是 session.getId());Object obj session.getAttribute(user);结果发现每次ajax跨域访问都是新的session 每次的sessionID都不一样在segmentfault上提了一个问题有人提示需要让ajax请求携带cookie也就是认证信息于是在拦截器中增加了一个需要认证信息的headerresponse.setHeader(Access-Control-Allow-Credentials, true);然后再次在浏览器中测试发现浏览器提示当Access-Control-Allow-Credentials设为true的时候Access-Control-Allow-Origin不能设为星号既然不让我设为星号我就改成前端项目的配置response.setHeader(Access-Control-Allow-Origin, http://127.0.0.1:8010);发现每次ajax请求还是不同的session打开chrome的network发现每次请求的请求头中并没有和我想象的一样携带cookie信息也就是下面这个headerCookie:JSESSIONIDnode015f4w1j2kgjk61i7jyyim8lo3u0.node0;因为我用的axios所以找到axios的文档链接描述发现一下内容// 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 credentialswithCredentials: 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默认是false意思就是不携带cookie信息那就让它为true我是全局性配置的就是main.js中的这句话axios.defaults.withCredentialstrue;然后再测试发现每次ajax请求都是同样的session了(不包含浏览器的options请求)。3、代理配置因为不想每个页面里的请求都写http://127.0.0.1:8080并且我用的是element ui的webpack项目模板所以就想使用代理(不知道叫这个合适不合适)devServer: {host: 127.0.0.1,port: 8010,proxy: {/api/: {target: http://127.0.0.1:8080,changeOrigin: true,pathRewrite:{/api:/xxxxxx}}}把ajax请求改成下面这个样子this.$axios.post(/api/xx/xxx, {}, {headers: {Content-Type: application/json;charsetutf-8}}).then(function(response) {// 这里是处理正确的回调}).catch(function(response) {// 这里是处理错误的回调console.log(response)});网上说都是配置为proxyTable, 用的是http-proxy-middleware这个插件我装上插件改成这个webpack总是报错说proxyTable是非法的配置无法识别。无奈改成了模板自带的proxy可以使用为什么可以用我还不清楚proxyTabel为什么不能用也没搞明白。有知道的可以指点一下。虽然代理配置好了也能正常请求结果发现请求的session又不一样了感觉心好累啊没办法只能再看请求头是不是有问题发现返回header中有session限制的如下set-cookie:JSESSIONIDnode0v5dmueoc119rb42b59k5qf3w0.node0;Path/xxxx要求cookie只能再/xxxx下也就是项目的根路径下使用于是我把代理改成devServer: {host: 127.0.0.1,port: 8010,proxy: {/xxxx/: {target: http://127.0.0.1:8080,changeOrigin: true}}session又恢复正常了可以用了不知道为什么配成api映射的形式为什么不能用。这就是解决这个跨域session问题的过程希望对大家有点帮助
