要么改变世界,要么适应世界

使用axios+tomcat HttpServlet处理跨域请求以及处理cookie

2020-12-17 01:18:00
201
目录

前因

有一个需求,前端通过axios发送用户名和密码到后台,后台查询数据库后,确认合法用户后直接把信息存进session里边,而为了实现这个 需求,就需要前端解决跨域,并且将cookie存到本地计算机中。

实现

首先是通过代理实现跨域请求:前端发送url:http://localhost:8081/beforeLogin,访问到http://localhost:8080/testJson4servlet/beforeLogin

参照广大网友的步骤:在和package.json同级目录下新建配置文件vue.config.js

// vue.config.js
module.exports = {

    devServer: {
        port: 8081,
        proxy: {
            '/api': {

                target: 'http://localhost:8080/testJson4servlet/',
                ws: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                }
            }
        },
        disableHostCheck: true,
    }

}

main.js中配置全局axios

import Axios from 'axios'
Vue.use(ElementUI);

Vue.prototype.$axios = Axios;


Vue.config.productionTip = false
Axios.defaults.withCredentials = true;

在需要发送请求的地方加上前缀url:"api"

this.$axios.get("/api/beforeLogin").then((res) => {
	console.log(res);
});

这样子虽然能够发送请求,后台也能够接受数据,但是!!!,每次发送的sessionID都不一样,这样子无法进行登陆验证(你会发现每次登陆后,下次还要登陆),在浏览器里边打开审查元素也看不到Cookie,但是在响应头Response headers里边看到了set-cookie:

set-cookie: JSESSIONID=DFBEA9837130E7DA23723674A2B3EFE9; Path=/testJson4servlet; HttpOnly

注意到后面的这个testJson4servlet,这个地址刚好是我后台tomcat的项目地址。

由于我们前面使用代理的时候设置了rul前缀为api,导致这里对应不上,因此需要在vue.config.js改我们的前缀url为我们的项目地址

// vue.config.js
module.exports = {

    devServer: {
        port: 8081,
        proxy: {
            '/testJson4servlet': {

                target: 'http://localhost:8080/testJson4servlet/',
                ws: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/testJson4servlet': '',
                }
            }
        },
        disableHostCheck: true,
    }

}

请求代码相应地进行修改

this.$axios.get("/api/beforeLogin").then((res) => {
	console.log(res);
});

后台打印的sessionId终于短时间内不会改变了!!!:D

org.apache.catalina.session.StandardSessionFacade@7fa755a9
org.apache.catalina.session.StandardSessionFacade@7fa755a9
org.apache.catalina.session.StandardSessionFacade@7fa755a9
org.apache.catalina.session.StandardSessionFacade@7fa755a9
历史评论
开始评论