VUE或Axios不要存储会话cookie [英] Vue or Axios don't store session cookie

问题描述

我面临一个问题，但我不知道它在哪里，为什么。 我有一个基于Express4(NodeJS)的后端API，我们已经用Passport实现了Auth。

当我使用Postman时，我使用POST ON/LOGIN登录。它存储会话Cookie，现在可以访问所有路由，因为该Cookie未过期。

但是我的前端是基于VueJS的。我使用Axios来完成请求。这个要求似乎不错。但任何Cookie都会存储，因此浏览器会在登录页面上执行环回操作。

我尝试过没有身份验证检查，或者不是相同的身份验证检查。但在邮递员身上是有效的。

Vue的main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Axios from 'axios'
Vue.use(VueRouter)

import auth from './utils/auth'

import App from './components/App.vue'

import Login from './components/Login.vue'
import Home from './components/Containers.vue'

require('font-awesome-loader');

function requireAuth (to, from, next) {
  if (!auth.checkAuth()) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', name: 'containers', component: Home, beforeEnter: requireAuth },
    { path: '/login', component: Login },
    { path: '/logout',
      beforeEnter (to, from, next) {
        auth.logout()
        next('/')
      }}
  ]
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

和auth.js(完成请求的位置)

import axios from 'axios'
import { API_URL } from '../config/app'

export default {

  user: {
    authenticated: false
  },

  login (email, pass, cb) {
    LoginRequest(email, pass, (res) => {
      this.user.authenticated = res.authenticated
      if (this.user.authenticated) {
        console.log('ok')
        if (cb) cb(true)
      } else {
        console.log('pasok')
        if (cb) cb(false)
      }
    })
  },

  checkAuth () {
    if (getAuth()) {
      this.authenticated = true
    } else {
      this.authenticated = false
    }
  },

  logout (cb) {
    this.user.authenticated = false
    if (cb) cb()
  }
}

function LoginRequest (email, pass, cb) {
  axios.post(API_URL + '/api/login', {
    email: email,
    password: pass
  }).then(response => {
    if (response.status === 200) {
      cb({ authenticated: true })
    } else {
      cb({ authenticated: false })
    }
  }, response => {
    cb({ authenticated: false })
  })
}

function getAuth (cb) {
  axios.get(API_URL + '/me').then(response => {
    return true
  }, response => {
    return false
  })
}

编辑： 后端使用我的CORS：

 // allow CORS:
        app.use(function (req, res, next) {
          res.header("Access-Control-Allow-Origin", "*");
          res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT$
          res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,$
          next();
        });

谢谢！

推荐答案

根据我的经验，这往往是由CORS(跨域资源共享)引起的问题。

也就是说，如果您的API_URL与您的应用程序的auth.js正在运行的域不在同一个域上，那么Axios在默认情况下将无法发送cookie。您可以在此处阅读有关如何允许您的API使用跨域凭据的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials

实际上，您可以使用CORS模块https://www.npmjs.com/package/cors在一些类似于服务器端的配置中应用必要的Header：

var express = require('express')
  , cors = require('cors')
  , app = express()

app.use(cors({
    origin: "myapp.io",
    credentials: true
}))

指定运行auth.js脚本的源URL尤其重要，否则攻击者可能会使用跨站点脚本攻击。

希望这会有帮助！

这篇关于VUE或Axios不要存储会话cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！