koa-session设置Cookie后获取不到

发布于:2025-03-07 ⋅ 阅读:(17) ⋅ 点赞:(0)

在谷歌浏览器中请求获取不到cookie问题之一(谷歌安全策略)

场景

前端使用 axios 请求,项目地址:http://192.168.8.1:5173

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://127.0.0.1:3001/',
  timeout: 60000,
  headers: {
    ['Content-Type']: 'application/x-www-form-urlencoded'
  },
  withCredentials: true
})

request.interceptors.request.use(
  (req) => {
    return req
  },
  (err) => {
    return err
  }
)

request.interceptors.response.use(
  (res) => {
    return res
  },
  (err) => {
    return err.response
  }
)

export default request

后端使用 koa + cors中间件 + koa-session中间件,配置了跨域,接口地址:127.0.0.1:3001

const Koa = require('koa')
const session = require('koa-session')
const cors = require('@koa/cors')

const app = new Koa()

app.use(
  cors({
    origin: 'http://192.168.8.1:5173',
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
    credentials: true
  })
)

app.keys = ['test']
const CONFIG = {
  key: 'koa.sess1',
  maxAge: 2 * 60 * 60 * 1000,
  secure: false
}
app.use(session(CONFIG, app))

app.use((ctx) => {
  if (ctx.request.url === '/set') {
    ctx.session.user = 'test666'
    ctx.body = 'ok'
  } else if (ctx.request.url === '/get') {
    console.log(ctx.session.user)
    ctx.body = ctx.session.user
  }
})

app.listen(3001, () => {
  console.log('start server 3001')
})

问题

请求成功后,后端设置cookie成功,但前端浏览器响应中携带的cookie后面会有个(三角感叹号),后端也无法获取cookie(后端获取到的cookie是undefined)

 解决

把前端项目地址改为 :http://127.0.0.1:5173

(也可以前端做代理访问)

 

 后端修改跨域配置为前端新地址

const Koa = require('koa')
const session = require('koa-session')
const cors = require('@koa/cors')

const app = new Koa()

app.use(
  cors({
    origin: 'http://127.0.0.1:5173',
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
    credentials: true
  })
)

// ...

也就是项目ip与请求ip保持一致(端口可以不用),这时浏览器请求响应后面的感叹号就会消失,后端就能获取到设置的cookie;

注意:

修改后要清除浏览器缓存,再刷新查看;否则很容易出现误导(吃过亏)

总结

此问题在360极速浏览器中测试时正常,在谷歌浏览器测试时才出现,后查阅资料了解谷歌自51版本后改了cookie安全策略;

以上问题为本地开发时出现,线上暂未部署测试