前端vue axios 后端 koa2,前端发送请求,不携带cookie

发布于 2022-09-06 23:19:30 字数 3736 浏览 17 评论 0

题主目前刚学习 node 以及后端知识。在把之前的用 vue 写的 todolist 结合后端代码的时候(登录部分)出现了问题。

前端代码 - vue methods

methods: {
    checkHasLogin () {
      axios.get('/api/login/hasLogin')
        .then((res) => {
          if (res.success) {
            this.username = res.success.msg
            console.log('username ok')
          } else {
            this.username = ''
            console.log('username fail')
            this.$router.replace('/login')
          }
        })
        .catch((err) => { console.log(err) })
    }
},
mounted () {
  console.log('todolist mount')
  this.checkHasLogin()
}

前端代码 - axios

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.withCredentials = true
axios.defaults.crossDomain = true

export default axios

后端代码 - app.js

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const cors = require('kcors')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const session = require('koa-session')

const path = require('path')

const index = require('./routes/index')

app.keys = ['vue koa todo demo']

const CONFIG = {
  key: 'koa:todo',
  maxAge: 86400000,
  overwrite: true,
  httpOnly: true,
  signed: true,
  rolling: false,
  renew: false
}

// error handler
onerror(app)

// 允许跨域
app.use(cors({
  origin: 'http://localhost:8080',
  credentials: true
}))
app.use(session(CONFIG, app))

// middlewares
app.use(bodyparser({
  enableTypes: ['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(path.resolve(__dirname, '/public')))

app.use(views(path.resolve(__dirname, '/views'), {
  extension: 'pug'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

// routes
app.use(index.routes(), index.allowedMethods())

// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
})

module.exports = app

后端代码 - login.js

const router = require('koa-router')()
const User = require('../models/user')
const checkLogin = async (ctx, next) => {
  const { name, pwd } = ctx.request.body
  const userDoc = await User.findOne({ userId: name })
  if (userDoc) {
    if (userDoc.userPwd === pwd) {
      // ctx.session = {
      //   userName: userDoc.userId
      // }
      console.log('userId', userDoc.userId)
      ctx.session.userName = userDoc.userId
      console.log('session userId', ctx.session.userName)
      ctx.body = { success: true, msg: '' }
    } else {
      ctx.body = { success: false, msg: '密码错误' }
    }
  } else {
    ctx.body = { success: false, msg: '用户名不存在' }
  }
}

const checkHasLogin = async (ctx, next) => {
  console.log(ctx.session.userName)
  if (ctx.session.userName) {
    ctx.body = {
      success: true,
      msg: ctx.session.userName
    }
  } else {
    ctx.body = {
      success: false,
      msg: ''
    }
  }
}

router.get('/hasLogin', checkHasLogin)
router.post('/', checkLogin)

在输入登录信息后,服务器端的 set-cookie 可以看见,但是前端再次请求的时候并没有携带上 Cookie,而且浏览器的 application 中也没有 Cookie 信息

clipboard.png
clipboard.png

麻烦各位大神看一哈。。。问题可能有点白,麻烦大家轻喷。。感谢感谢。。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

你げ笑在眉眼 2022-09-13 23:19:30

那你的node服务的端口是多少?

勿忘初心 2022-09-13 23:19:30

axios默认是不带cookie的,需要把withCredentials设置为true

夏日落 2022-09-13 23:19:30

楼主现在怎么解决了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文