koa2+vue+axios создает сессию системы управления блогами

внешний интерфейс Vue.js koa axios
koa2+vue+axios создает сессию системы управления блогами

Реклама: эта статья была впервые опубликована в моем личном блоге, добро пожаловать в гости:Оригинальный адрес нажмите здесь

Давайте начнем мое шоу

1. Позвольте мне рассказать о том, что я использую в своей системе управления блогом и на сервере.

мой блогСерверЯвляется ли использование koa2 + MySQL,Интерфейс управления фономЧто используется: Vue+ElementUi+axios. Это все рутинные комбинации, нечего и говорить.

Во-вторых, сервер

==koa2-cors:== используется для установки междоменных запросов;

// 官方推荐配置
var Koa = require('koa');
var cors = require('koa2-cors');
 
var app = new Koa();
app.use(cors());

==koa-session-minimal:== Поскольку сам koa не может обрабатывать сеансы, для обработки сеансов в koa требуется поддержка другого промежуточного программного обеспечения После поиска в Интернете я обнаружил, что многие люди используют это, поэтому я также использовал его. . . ; ==koa-mysql-session:== используется для хранения сеанса в базе данных

// 这两个模块用法

const session = require('koa-session-minimal');
const MysqlStore = require('koa-mysql-session');
// session存储配置
const sessionMysqlConfig= {
    user: config.database.USERNAME,
    password: config.database.PASSWORD,
    database: config.database.DATABASE,
    host: config.database.HOST,
}

// 配置session中间件
app.use(session({
    key: 'USER_SID',
    store: new MysqlStore(sessionMysqlConfig),
    cookie: {                   // 与 cookie 相关的配置
        domain: 'localhost',    // 写 cookie 所在的域名
        path: '/',              // 写 cookie 所在的路径
        maxAge: 1000 * 300,      // cookie 有效时长
        httpOnly: true,         // 是否只用于 http 请求中获取
        overwrite: false        // 是否允许重写
    }
}))

Все готово, пробуем сессию

1. После ввода правильного имени пользователя и пароля сначала установите информацию о сеансе

 ctx.session = {
     user: res[0]['account'],
     id: res[0]['id']
}

На данный момент мы должны увидеть значение в базе данных запроса входа в систему заседания и браузера, как показано:

browsercookie.png
mysqlsession.png

но,

Когда я запросил другие интерфейсы, я обнаружил, что файл cookie в заголовке запроса браузера пропал! ! ! , да, не более. . . Независимо от того, какой запрос я инициирую, я не могу получить информацию о пользователе, которая мне нужна, в бэкэнд-запросе.

//如果后端拿到了浏览器的cookie
//在后端可以通过
ctx.session.user  //拿到我们登陆成功后设置的用户信息

То, что вы получаете, всегда пустое =={}==, Путем поиска в основных поисковых системах мы обнаружили, что ==axios не позволяет заголовкам ajax-запросов содержать файлы cookie по умолчанию ==,:anguished:, что необходимо установить вручную:

axios.defaults.withCredentials=true;//让ajax携带cookie

Ну, :triumph: Просто настройте вручную, это не так уж и сложно.

Войдите снова после настройки. . .

Эшли! ! ! ! :anger: Не могу войти, консоль выдает ошибку. . . .

Failed to load http://localhost:3500/login: Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
 Origin 'http://localhost:8080' is therefore not allowed access. 
The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Почему опять междоменный? ! ! Разве он не разрешал междоменные запросы раньше? ? ? . . . Продолжим поиск в поисковике. . .

информация заголовка Access-Control-Allow-Credentials: true Access-Control-Allow-Origin не может быть '',потому что '' будет конфликтовать с Access-Control-Allow-Credentials:true, вам нужно настроить указанный адрес:shit::shit::shit::shit:

Что ж, давайте еще раз изменим конфигурацию предыдущего корса

// 修改前
app.use(cors())
//  修改后如下
app.use(cors({
    origin: [ 'http://localhost:8080'], // 允许这个域名的 跨域请求
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'POST', 'DELETE'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));

После настройки я, наконец, могу нормально войти в систему и успешно получить информацию о пользователе через ==ctx.session==: smiley::smiley::smiley::smiley::smiley::smiley:

Потом родился еще один вопрос :cold_sweat:

Мой сервер используется для внешнего и внутреннего управления Xiyong. Они на разных портах. . . Но этот междоменный домен позволяет установить только одно доменное имя. . . :рыдать::рыдать::рыдать::рыдать:,

Было бы лучше, если бы старейшина мог подсказать.

Неважно, сначала ложись спать, жизнь важна, приходи завтра!

Категории