經(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()

但是當(dāng)我們設(shè)置好cookie并把它發(fā)送到服務(wù)端后，卻發(fā)現(xiàn)服務(wù)端并沒有接受到我們的cookie。原因是vue-axios默認(rèn)是不攜帶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())

當(dāng)不設(shè)置cookie時，這樣是沒有問題的，可當(dāng)我在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傳遞，從而記錄下用戶的登錄信息，不需要用戶進(jìn)行重復(fù)的登錄。