koa2+vue+axios搭建一個博客臺管理系統之session踩坑

打個廣告： 本文首發在個人我的博客上，歡迎訪問：原文地址點這裏

下面就開始個人表演

1、先說一下我博客管理系統和服務端用到的東西

個人博客的服務端是採用的koa2 + MySQL，後臺管理界面採用的是：Vue+ElementUi+axios。這都是些常規組合，沒有什麼好說的。

2、服務端

==koa2-cors：== 用來是設置跨域請求；

// 官方推薦配置
var Koa = require('koa');
var cors = require('koa2-cors');
 
var app = new Koa();
app.use(cors());
複製代碼

==koa-session-minimal：== 由於koa自己並不能處理 session，在 koa 中處理 session 須要其餘中間件的支持，在網上一番搜索後，發現不少人用的這個，因而我也用了。。。； ==koa-mysql-session：== 用來吧session存到數據庫裏面

// 這兩個模塊用法

const session = require('koa-session-minimal');
const MysqlStore = require('koa-mysql-session');
// session存儲配置
const sessionMysqlConfig= {
    user: config.database.USERNAME,
    password: config.database.PASSWORD,
    database: config.database.DATABASE,
    host: config.database.HOST,
}

// 配置session中間件
app.use(session({
    key: 'USER_SID',
    store: new MysqlStore(sessionMysqlConfig),
    cookie: {                   // 與 cookie 相關的配置
        domain: 'localhost',    // 寫 cookie 所在的域名
        path: '/',              // 寫 cookie 所在的路徑
        maxAge: 1000 * 300,      // cookie 有效時長
        httpOnly: true,         // 是否只用於 http 請求中獲取
        overwrite: false        // 是否容許重寫
    }
}))
複製代碼

一切準備就緒，開始試試session吧

1. 在輸入正確的用戶名和密碼後，先設置一下session的信息

ctx.session = {
     user: res[0]['account'],
     id: res[0]['id']
}
複製代碼

此時，咱們能看到在數據庫和瀏覽器的登錄請求中已經有了session值，如圖：

可是，

當我請求其餘接口的時候，發現瀏覽器的請求頭裏面的cookie不見了！！！，對，沒有了。。。無論我發起什麼請求，在後端請求裏面都拿不到我須要的用戶信息

//若是後端拿到了瀏覽器的cookie
//在後端能夠經過
ctx.session.user  //拿到咱們登錄成功後設置的用戶信息

複製代碼

拿到的始終是一個空的 =={}==， 經過去各大搜索引擎搜索發現：==axios默認是不讓ajax請求頭部攜帶cookie的==,:anguished:，須要手動設置：

axios.defaults.withCredentials=true;//讓ajax攜帶cookie
複製代碼

好吧，:triumph:手動設置就設置吧，也不是什麼難事。

設置完後從新登錄。。。

阿西吧！！！！:anger:登不上去了，控制檯報錯了。。。。

Failed to load http://localhost:3500/login: Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
 Origin 'http://localhost:8080' is therefore not allowed access. 
The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
複製代碼

怎麼又跨域了？！！以前不是設置了容許跨域請求嗎？？？ 。。。我們繼續上搜索引擎找找去。。。

header信息 Access-Control-Allow-Credentials:true Access-Control-Allow-Origin不能夠爲 ''，由於 '' 會和 Access-Control-Allow-Credentials:true 衝突，需配置指定的地址:shit::shit::shit::shit:

好吧，咱又去修改以前的cors的配置

// 修改前
app.use(cors())
// 修改後以下
app.use(cors({
    origin: [ 'http://localhost:8080'], // 容許這個域名的 跨域請求
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'POST', 'DELETE'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));

複製代碼

設置後終於能夠正常登錄了，經過==ctx.session==也能成功拿到用戶信息了:smiley::smiley::smiley::smiley::smiley::smiley:

緊接着，另外一個問題又誕生了:cold_sweat:

個人服務端是前端和後臺管理西永共用的。他們呢在不一樣的端口。。。可是這個跨域只容許設置一個域名。。。:sob::sob::sob::sob:，

有大老能指點下就更好了

無論了，先睡覺，小命要緊，明天再來！