Question

我目前正在处理表单，并决定测试在服务器上注册时发送电子邮件，并向用户提供响应性反馈。

在Vue组件创建上，我获取了csrf令牌并将其存储以备将来发布。我将它作为'X-CSRF-Token'附加到标题中。我发送令牌仍然收到无效的CSRF令牌错误。我已经验证了标头中的数据，并且csrf令牌实际上是在发送但只是被拒绝或标头丢失了。

Screenshot of error and response

//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（不起作用）。我已经尝试了各种方式的标题。对你的帮助表示感谢。

编辑：上传以在帖子前显示正确的标题。 Pre-post logs of data

Answer 1

所以我意识到csurf会找两件事。一个cookie（这在错误中不是很明显，但仍然是）和通过标头发送的令牌。默认情况下，Axios显然不支持cookie，因此我决定转向JWT标头方法。

快递＆amp; Csurf拒绝Vue（Axios）发布请求

1 个答案: