鍍金池/ 問答/C  HTML/ 前端vue axios 后端 koa2,前端發(fā)送請求,不攜帶cookie

前端vue axios 后端 koa2,前端發(fā)送請求,不攜帶cookie

題主目前剛學習 node 以及后端知識。在把之前的用 vue 寫的 todolist 結(jié)合后端代碼的時候(登錄部分)出現(xiàn)了問題。

前端代碼 - 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)

在輸入登錄信息后,服務(wù)器端的 set-cookie 可以看見,但是前端再次請求的時候并沒有攜帶上 Cookie,而且瀏覽器的 application 中也沒有 Cookie 信息

clipboard.png
clipboard.png

麻煩各位大神看一哈。。。問題可能有點白,麻煩大家輕噴。。感謝感謝。。

回答
編輯回答
心癌

axios默認是不帶cookie的,需要把withCredentials設(shè)置為true。

2018年3月31日 22:13
編輯回答
裸橙

那你的node服務(wù)的端口是多少?

2017年6月27日 05:12