node.js - Vue 或 Axios 不存储 session cookie

Question

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

当我使用 postman 时，我在/login 上使用 post 登录。它存储一个 session cookie，并且所有路由现在都可以访问，因为 cookie 没有过期。

但是我的前端是基于 VueJS 的。我使用 Axios 来执行请求。这个要求似乎很好。但任何 cookie 都会被存储，因此浏览器会在登录页面上进行环回。

我试过没有授权检查或不一样。但是在 postman 上它可以工作。

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();
        });

谢谢 !

Answer 1

以我的经验，这往往是由 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 尤为重要，否则攻击者可能会使用跨站点脚本攻击。

希望这会有所帮助!