跪求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="/",亲测可用

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值