經(jīng)過了一段時間的vue學(xué)習(xí)，最近試著用vue+Express做了一個用戶注冊登錄的小項目控汉。在涉及到cookie時遇到了不少的麻煩笔诵，下面記錄我自己解決問題的過程。
vue與cookie
在vue中我們可以使用vue-cookie插件來設(shè)置cookie姑子。先安裝并在vue中引用它乎婿，之后就可以用this.$cookies來操作cookie了。
// 設(shè)置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()
但是當我們設(shè)置好cookie并把它發(fā)送到服務(wù)端后街佑，卻發(fā)現(xiàn)服務(wù)端并沒有接受到我們的cookie谢翎。原因是vue-axios默認是不攜帶cookie的捍靠，如需要攜帶cookie，則需要設(shè)置：
import axios from 'axios'
import VueAxios from 'vue-axios'
// 讓axios攜帶cookies
axios.defaults.withCredentials = true
Vue.use(VueAxios, axios)
這樣服務(wù)端就可以接收到我們發(fā)送的cookie了森逮。
Express與cookie
在express中我們需要用cookie-parser中間件來操作cookie榨婆，具體參考其文檔。
在前端訪問服務(wù)端時褒侧，經(jīng)常會發(fā)生跨域的問題良风。跨域問題在express只需要一個cors中間件就可以解決闷供。
const cors = require('cors')
app.use(cors())
當不設(shè)置cookie時烟央，這樣是沒有問題的，可當我在web端設(shè)置了cookie后歪脏，跨域問題就又出現(xiàn)了吊档。原來cookie也存在跨域傳遞問題，此時應(yīng)該設(shè)置：
const cors = require('cors')
const corsOptions ={
origin: 'http://localhost:8080', // web域
credentials: true
}
app.use(cors(corsOptions))
如果不使用中間件也可以這樣來設(shè)置：
app.all('*',function(req, res, next) {
// *號為來源唾糯，需要顯式設(shè)置來源,不能寫*
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();
});
這樣就基本可以實現(xiàn)了vue與express的cookie傳遞，從而記錄下用戶的登錄信息鬼贱，不需要用戶進行重復(fù)的登錄移怯。
