前端vue axios 后端 koa2,前端发送请求,不携带cookie
题主目前刚学习 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 信息
麻烦各位大神看一哈。。。问题可能有点白,麻烦大家轻喷。。感谢感谢。。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
那你的node服务的端口是多少?
axios
默认是不带cookie
的,需要把withCredentials
设置为true
。楼主现在怎么解决了