vue2+express前后端分离跨域session等问题
基于 vue2 + express 的 RBAC 角色权限验证前后端分离项目。前端vue2 负责路由控制,数据渲染,后端 express 负责数据库操作,RBAC权限控制。
前端:
- 脚手架:vue-cli
- 选型:vue2 + vuex + vue-router + axios + iview + ES6
后端:
- 脚手架:express-generator
- 选型:express4 + mongodb
结构整合:
使用vue-cli
生成的项目,默认安装了简易的 express,该 express 的启动文件为build/dev-server.js
。执行cnpm start
启动该 express,实际主要是启一个服务来运行 Vue。所以我们后端部分不以该文件为入口。
后端部分的目录使用express-generator
来生成,由于我们做了前后端分离,所以express 的任务只是提供接口,做数据库操作,所以我们把view、pubic目录删掉。
最后将前后端代码整合一下。在 vue-cli 生成的目录下创建 server 目录用来存放后端代码,将package.json文件合并,然后添加启动后端的脚本”server”: “node server/bin/www”
package.json 文件如下:
1 | { |
这样,我们在执行 cnpm start 及 cnpm run server 后即可分别启动前端和后端服务。项目目录如下:
1 | . |
这样项目的结构比较清晰。 遇到的问题:
- 在开发阶段,vue运行与localhost:8080端口,express运行于localhost:3000端口。vue在跨域请求接口时会提示跨域请求不被允许。这里使用express的cros模块,允许8080端口的请求:
1 | const cors = require('cors'); |
这样就解决了跨域请求问题。
- 在 vue 请求后端接口时,我选用了vue官方推荐的 axios 作为http请求组件。涉及到登陆验证,所以 express 使用express-session及connect-redis模块,将session存在redis中。在登录成功后,将登录信息存储于 req.session.user 中,当有其他请求时,通过判断 req.session.user 来判断是否登录及登录是否过期。
1 | const session = require('express-session'); |
但是通过调试发现,每次登陆后用户信息确实存到session中了,但是下次请求时session却为空!最后发现是由于跨域问题引起的。由于使用了cros安全代理,默认是拒绝接收浏览器发送的cookie,所以每次请求都不带cookie,sessionID自然对不上,所以每次都会是新的session,导致没法保存登陆状态。给cors配置参数,允许接收cookie即可。
1 | app.use(cors({ |
但是加完了发现问题还是没有解决,那么就是 axios 的问题了,原来axios默认发送http请求时是不会在头信息中附带cookie的,所以也需要配置开启。直接在main.js中全局设置:
1 | import axios from 'axios' // axios |
这样,问题终于解决了233…心累。 坑先填到这,持续更新。
github:https://github.com/flute/webpackvue2expressmongodbbackend
vue2+express前后端分离跨域session等问题