Vue или Axios не хранят файлы cookie сеанса

Question

У меня проблема, но я не знаю, где это и почему. У меня есть backend API, основанный на express4 (nodejs). Мы внедрили Auth с паспортом.

Когда я пользуюсь почтальоном, я вхожу в систему с сообщением/логином. он хранит файл cookie сеанса, и весь маршрут теперь доступен, поскольку cookie не истек.

Но с моим интерфейсом на основе VueJS. Я использую Axios для выполнения запроса. Запрос кажется хорошим. но все файлы cookie хранятся, поэтому браузер делает петлю на странице входа в систему.

Я пробовал без проверки подлинности или не то же самое. Но на почтальоне это работает.

в main.js для Vue:

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

EDIT: мои 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(); 
     }); 

Thank!

Answer 1

По моему опыту, это, как правило, проблема, возникающая из-за совместного использования ресурсов CORS (Cross-Origin Resource Sharing).

А именно, если ваш 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 применять необходимые заголовки в некоторой конфигурации сродни следующий на стороне сервера:

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

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

Особенно важно указать исходный URL-адрес, с которым работает ваш скрипт auth.js, иначе злоумышленник может использовать атаку сценариев Cross Site Scripting Attack.

Надеюсь, это поможет!