node(koa2)跨域與獲取cookie

欲做一個node 的網關服務，通過 cookie 做信息傳遞，選擇框架 koa2，這里簡單記錄跨域處理以及 cookie 獲取。

 

首先：解決跨域問題，使用 koa2-cros 來處理，跨域問題后端處理就好，與前端無瓜。

const cors = require('koa2-cros')

app.use(cors({
  origin: '*'
}))

 

其次：解決跨域是傳遞 cookie 問題，現在的瀏覽器請求默認都不帶 cookie 的，要帶上cookie 則需要添加配置參數，原生 fetch 方法需要添加 credentials: 'include' 參數，使用如下：

fetch('htp://192.168.210.151:3002/proxy', {
    credentials: 'include',
})
// 如果你用的 axios，請在配置參數中添加 withCredentials: true 參數即可

后端添加  credentails: true 

const cors = require('koa2-cros')

app.use(cors({
  origin: '*',
  credentails: true,
}))

然后新問題就出現了，瀏覽器發請求出現如下問題

意思就是 Access-Control-Allow-Origin: '*' 與 credentials: 'include' 不能共存，這里需要后端的請求頭將 Access-Control-Allow-Origin: '*' 中的 '*' 改成發送請求的 origin 就好了，如果粗暴點的話直接改成如下

const cors = require('koa2-cros')

app.use(cors({
  origin: (ctx) => {
     const origin = ctx.headers.origin  // 實際生產請根據具體情況來進行規則配置
     return origin
  }
}))

 

然后的話客戶端拿到的 Response Headers 對比如下

 

最終，雖然還是會出現 Provisional headers are shown 這個警告，但是前端也可以拿到數據了，后端也可以拿到 cookie 了。

 其他瀏覽器並沒有出現這個 Provisional headers are shown 警告，所以這個應該僅是 chrome 的一個警告。