-6ren"> -所以,我刚刚将 multer 和 cloudinary 添加到我的项目中。每当我使用我的表单向数据库添加一些内容时。它给出了这个错误“ForbiddenError:无效的 csrf token ” 但-6ren">
gpt4 book ai didi

node.js - Multer 和 CSRF 以及

转载 作者:太空宇宙 更新时间:2023-11-04 00:00:57 41 4
gpt4 key购买 nike

所以,我刚刚将 multer 和 cloudinary 添加到我的项目中。每当我使用我的表单向数据库添加一些内容时。它给出了这个错误“ForbiddenError:无效的 csrf token ”

但我已经通过添加 ?_csrf=<%= csrfToken %>" 解决了这个问题到我的表单中的操作属性

<form action="/admin?_csrf=<%= csrfToken %>" method="POST" enctype="multipart/form-data">

现在,我正在尝试为我的更新路线做同样的事情。它给了我与之前相同的错误“ForbiddenError: invalid csrf token”

我尝试过这样做 <form action="/admin/<%= prod._id %>?_method=PUT?_csrf=<%= csrfToken %>" method="POST" enctype="multipart/form-data">

或者这个

<form action="/admin/<%= prod._id %>?_method=PUT?_csrf=<%= csrfToken %>" method="POST" enctype="multipart/form-data">

或者这个

<form action="/admin/<%= prod._id %>?_method=PUT_csrf=<%= csrfToken %>" method="POST" enctype="multipart/form-data">

或者这个

<form action="/admin/<%= prod._id %>?_csrf=<%= csrfToken %>_method=PUT" method="POST" enctype="multipart/form-data">

你知道...不同种类的变化...希望其中一个能起作用。哈哈

无论如何,我所做的事情是不可能的吗?我的操作属性中可以有两种方法吗?

还有其他方法可以做到这一点吗?

编辑.ejs

<section class="no-padding-top">
<div class="container-fuid">
<div class="row">
<div class="col-lg-12">
<div class="block">
<div class="title"><strong>Edit Item</strong></div>
<form action="/admin/<%= prod._id %>?_method=PUT" method="POST" enctype="multipart/form-data">
<div class="form-group row">
<label class="col-sm-3 form-control-label">Product Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="prod[name]" value="<%= prod.name %>" required>
</div>
</div>
<div class="form-group row">
<label for="image" class="col-sm-3 form-control-label">Product Image</label>
<div class="col-sm-9">
<input type="file" id="image" name="image" accept="image/*" >
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Product Price</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="prod[price]" value="<%= prod.price %>" required>
</div>
<label class="col-sm-1 form-control-label">Product Quantity</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="prod[quantity]" value="<%= prod.quantity %>" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Product Brand</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="prod[brand]" value="<%= prod.brand %>" required>
</div>
<label class="col-sm-1 form-control-label">Product type</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="prod[type]" placeholder="Types of produces. i.e Wheels, Lights, Steering Wheels..." value="<%= prod.type %>" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Product Description</label>
<div class="col-sm-9">
<textarea cols="30" rows="10" class="form-control" name="prod[description]" required> <%= prod.description%> </textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-9 ml-auto">
<button type="submit" class="btn btn-primary">Edit Item</button>
<a href="/admin" class="btn btn-info ml-3">Cancel</a>
</div>
</div>
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
</form>
</div>
</div>
</div>
</div>
</section>

multer 和 cloudinary 启动

var multer = require('multer');
var storage = multer.diskStorage({
filename: function(req, file, callback) {
callback(null, Date.now() + file.originalname);
}
});
var imageFilter = function (req, file, cb) {
// accept image files only
if (!file.originalname.match(/\.(jpg|jpeg|png|gif)$/i)) {
return cb(new Error('Only image files are allowed!'), false);
}
cb(null, true);
};
var upload = multer({ storage: storage, fileFilter: imageFilter})

var cloudinary = require('cloudinary');
cloudinary.config({
cloud_name: 'pitscaraccessories',
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET
});

更新路线

router.put("/:id", middleware.isLoggedIn, middleware.isAdmin, upload.single('image'), function(req, res) {
Product.findById(req.params.id, async function(err, prod) {
if (err) {
req.flash("error", err.message);
} else {
if (req.file) {
try {

await cloudinary.v2.uploader.destroy(prod.imageId);
var result = await cloudinary.v2.uploader.upload(req.file.path);
prod.image = result.secure_url;
prod.imageId = result.public_id;

} catch (err) {
req.flash("error", err.message);
return res.redirect("back");
}
}

prod.save();

req.flash("success", "Updated Successfully");
res.redirect("/admin");
}
});
});

最佳答案

通过对我的代码执行此操作来修复此问题。将我的路线从 .put 更改为至.post

并手动更新内部的每个输入。

router.post("/:id", middleware.isLoggedIn, middleware.isAdmin, upload.single('image'), function(req, res) {
Product.findById(req.params.id, async function(err, prod) {
if (err) {
req.flash("error", err.message);
} else {
if (req.file) {
try {
await cloudinary.v2.uploader.destroy(prod.imageId);
var result = await cloudinary.v2.uploader.upload(req.file.path);
prod.image = result.secure_url;
prod.imageId = result.public_id;
} catch (err) {
req.flash("error", err.message);
return res.redirect("back");
}
}

prod.name = req.body.name;
prod.price = req.body.price;
prod.quantity = req.body.quantity;
prod.brand = req.body.brand;
prod.type = req.body.type;
prod.description = req.body.description;

prod.save();

req.flash("success", "Updated Successfully");
res.redirect("/admin");
}
});
});

并对我的表单元素执行此操作

<form action="/admin/<%= prod._id %>?_csrf=<%= csrfToken %>" method="POST" enctype="multipart/form-data">

关于node.js - Multer 和 CSRF 以及 <form action ="?_method=PUT">,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54734587/

41 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com