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

前因

有一个需求，前端通过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