经过了一段时间的vue学习，最近试着用vue+Express做了一个用户注册登录的小项目。在涉及到cookie时遇到了不少的麻烦，下面记录我自己解决问题的过程。
vue与cookie
在vue中我们可以使用vue-cookie插件来设置cookie。先安装并在vue中引用它，之后就可以用this.$cookies来操作cookie了。
// 设置cookie
this.$cookies.set(keyName, time)
// 获取cookie
this.$cookies.get(keyName)
// 删除cookie
this.$cookies.remove(keyName)
// 查看cookie是否存在
this.$cookies.isKey(keyName)
// 获取所有cookie
this.$cookies.keys()
但是当我们设置好cookie并把它发送到服务端后，却发现服务端并没有接受到我们的cookie。原因是vue-axios默认是不携带cookie的，如需要携带cookie，则需要设置：
import axios from 'axios'
import VueAxios from 'vue-axios'
// 让axios携带cookies
axios.defaults.withCredentials = true
Vue.use(VueAxios, axios)
这样服务端就可以接收到我们发送的cookie了。
Express与cookie
在express中我们需要用cookie-parser中间件来操作cookie，具体参考其文档。
在前端访问服务端时，经常会发生跨域的问题。跨域问题在express只需要一个cors中间件就可以解决。
const cors = require('cors')
app.use(cors())
当不设置cookie时，这样是没有问题的，可当我在web端设置了cookie后，跨域问题就又出现了。原来cookie也存在跨域传递问题，此时应该设置：
const cors = require('cors')
const corsOptions ={
origin: 'http://localhost:8080', // web域
credentials: true
}
app.use(cors(corsOptions))
如果不使用中间件也可以这样来设置：
app.all('*',function(req, res, next) {
// *号为来源，需要显式设置来源,不能写*
res.header("Access-Control-Allow-Origin", req.headers.origin);
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("Access-Control-Allow-Credentials",true);
//带cookies
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
这样就基本可以实现了vue与express的cookie传递，从而记录下用户的登录信息，不需要用户进行重复的登录。
