跪求vue用axios跨域 导致Cookie无法访问的问题 ？万恶的 JSESSIONID 遗留问题 ？亲测可用

说说自己搭建vue cli3 + element ui 的前端工程的经历吧，所遇到的问题 以及集成方面。

由于种种原因，前端的活也得兼容，实在无法忍受JSP了，恰好上面让重构 xx的Web，（原因太丑）。
boss : 听说你会Vue又想 前后分离是吧, 那你来搭建并部署吧。

我： ？？？？ 放下后台，拿起我 的40m 大刀 ，早已经 按捺不住了。

终究工作归工作，走向更好而不是 破罐子破摔，毕业设计 是自学了vue做的, 知道分离的好处，来吧，一些前人的优秀框架。

毕业设计时参考 vue-element-admin，半天被劝退，找了个简单的做完毕设。

工作一年多了之后，虽然没怎么接触前端，但是回头再看 vue-element-admin 发现满满都是精髓， 工程结构分明，组件功能明确…省略 n的指数 个字的夸奖吧。

但其组件对于我来说还是相对复杂些，不能直接拿来改，于是磨刀霍霍向用过的相对简单的一套。

明确自己要的东西及问题：

• 国际化
• 路由侧边栏
• 跨域Cookie问题（为什么不用唯一令牌，遗留问题）

发现vue-element-admin 的路由 及 左侧栏加载 做法比我那套好万倍！TagsView也不错，面包屑用得很灵性，icon-svg也很nice， 国际化刚好我要的，真香。

三两下将自己简单的vue项目 瞬间高大上了。感谢 panjiachen 的开源，让我一个后端仔也能快速集成这些功能。

最后一个遗留问题了 ，跨域Cookie问题, 因为不同源， 所以无法取到后台的cookie。在封装的axios 的请求配置中 ， 拦截返回的信息，打印头信息，视图取到cookie, 尝试了很多办法 终无果。

service.interceptors.response.use(
		
		 // HTTP Status Code
    response => {
		// debugger
		console.log(response.headers)
		// service status code
		const res = response.data;
		.....
	}	
);

输出

{connection: "close", content-disposition: "inline;filename=f.txt", content-type: "application/json;charset=UTF-8", date: "Tue, 14 Jul 2020 07:01:17 GMT", server: "Apache-Coyote/1.1", …}
connection: "close"
content-disposition: "inline;filename=f.txt"
content-type: "application/json;charset=UTF-8"
date: "Tue, 14 Jul 2020 07:01:17 GMT"
server: "Apache-Coyote/1.1"
transfer-encoding: "chunked"
x-powered-by: "Express"

就是没有set-cookie。

寻寻觅觅啊，都想打出跪求两个字眼了 ，找了大半天的，最后发现不同源cookie无法获取~ 都已经想要把后台改成令牌模式了，要不是急着出东西。

好吧，一开始就想着让登录接口显示返回cookie, 就是放在data里直接传过来，自己设置就好， 最后发现这个, 在 vue.config.js下 （基于vue cli3）

module.exports = {
    // baseUrl: '/',
	publicPath: '/',
    assetsDir: 'static',
    productionSourceMap: false,
		 devServer: {
			host: '0.0.0.0',
			port: 8091,
			// publicPath: '../',
			// 设置代理
			proxy: {
				"/api": {
					target: 
					
					 "http://自己的ip/项目名/",
					// target: " ", // 跨域访问
					ws: true, // 是否启用websockets
					changOrigin: true, //开启代理
					secure: false, // 将安全设置为false,才能访问https开头的
					pathRewrite: {
						'^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
					},
					
					  //解决跨域引起的session问题，这段代码改变cookie 的作用于为 path="/"
					onProxyRes(proxyRes, req, res) {
							var oldCookie = proxyRes.headers['set-cookie']
							if (oldCookie == null || oldCookie.length == 0) {
									delete proxyRes.headers['set-cookie']
									return
							}
							
							var oldCookieItems = oldCookie[0].split(';')
							var newCookie = ''
							for(var i=0; i < oldCookieItems.length; ++i){
									if(newCookie.length >0)
											newCookie += ';'
									if(oldCookieItems[i].indexOf('Path=') >= 0)
											newCookie += 'Path=/'
									else
											newCookie += oldCookieItems[i]
							}
							proxyRes.headers['set-cookie'] = [newCookie]
					}
				},
				
			},
			
		 },
		 

}

另外还需要在 统一配置 axios的地方加上, 我直接两个地方都加上了，可以去掉其中一个withCredentials ，自行尝试。

axios.defaults.withCredentials = true

const service = axios.create({
	baseURL: '/api/',
	withCredentials: true, 
    timeout: 5000 // request timeout
});

作为后端仔，理解核心就够了

（withCredentials = true）： 用于让 axios可携带cookie, 因为默认不携带。
（改变cookie 的作用于为 path="/",） 让作用域同源。

无非就是将服务端带来的SESSIONID 返回去，即使配置了上面的做法，仍然是得不到session, 但是不难看出 反向代理 将set-cookie 设置到Cookie里面去了（通过修改 path="/",亲测可用。

今天不学习，明天变辣鸡。