Express & Csurf отклоняет запрос Vue (Axios) - PullRequest
Новая
       9

Express & Csurf отклоняет запрос Vue (Axios)

0 голосов
/ 26 апреля 2018

В настоящее время я работаю с формами и решил проверить отправку электронной почты onchange во время регистрации на сервер и дать отзывчивый отзыв пользователям.

При создании компонента Vue я получаю токен csrf и сохраняю его для будущих публикаций.,Я прикрепляю его к заголовкам как «X-CSRF-Token».Я отправляю токен и все еще получаю неверную ошибку токена CSRF.Я проверил данные в заголовках и токен csrf фактически отправляется, но просто отклоняется, или в заголовке отсутствует что-то.

Снимок экрана ошибки и ответа 

//App.js
var createError = require('http-errors');
var cors = require('cors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var csurf = require('csurf')
var Mongoose = require('mongoose')
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var productRouter = require('./routes/products')
var app = express();

// DB things
var db
dbConnect();

app.use(cors())
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser())
app.use(csurf({ cookie:true }))


app.use('/api/', indexRouter);
app.use('/api/users', usersRouter);
app.use('/api/products', productRouter)

//index routes
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.json({
    message:'respond with a resource blank',
  });
});

router.get('/getCSRF/', function(req, res, next) {
  res.json({
    csrf:req.csrfToken(),
  });
});

module.exports = router;

Ниже приведен маршрут, который я пытаюсь опубликовать на 

// Users Check Email Post Route
router.post('/checkEmail',function(req,res,next){
  email = req.body.email
  console.log(email)
  User.findOne(function(err,user){
    if (err) { return res.json({ err:err })}
    else { return res.json({ user:true }) }
  })
})

Вот метод, используемый в Vue для публикации 

checkEmail: function () {
    var headers = {
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': '*' ,
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
      'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, 
       Accept',
      'Content-Type':'application/x-www-form-urlencoded',
      'X-CSRF-Token':this.$store.getters.getCSRF,
    }

    axios.post('http://localhost:8000/api/users/checkEmail', {
      email: this.user.Email
    },headers )
    .then(function (response) {
      console.log(response)
    })
    .catch(function (error) {
      console.log(error.response)
    });
},

Проблема довольно распространена, и я прошел через20 постов и пробовали свои решения, но это не помогло вообще.Я пытался использовать csurf независимо на том же маршруте (не работает).Я перепробовал всевозможные заголовки.Ваша помощь будет принята с благодарностью.

РЕДАКТИРОВАТЬ: Загрузка, чтобы показать правильные заголовки перед публикацией. Предварительные журналы данных

1 Ответ

0 голосов
/ 28 апреля 2018

Итак, я понял, что csurf ищет две вещи.Cookie (это не очень очевидно из ошибки, но тем не менее) и токен, который будет отправлен через заголовок.Axios по умолчанию, по-видимому, не поддерживает файлы cookie, поэтому я решил перейти на подход заголовка JWT.

...