Express & Csurf 拒绝 Vue (Axios) 发布请求答案

【问题标题】：Express & Csurf rejects Vue (Axios) post requestExpress & Csurf 拒绝 Vue (Axios) 发布请求
【发布时间】：2018-10-06 18:14:10
【问题描述】：

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

在创建 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中用来post的方法

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

【问题讨论】：

报错信息说有无效的csrf token 你确定你添加正确吗？
@AmrAly 是的，我在发送之前打印了标题，它们很好。
在发送请求之前尝试控制台日志this.$store.getters.getCSRF检查它是否存在
@AmrAly 是的，它存在

标签： express vue.js axios

【解决方案1】：

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

【讨论】：