Node.js AJAX 删除 403 禁止

Question

我尝试创建从服务器中删除图像的方法。现在我只想处理 DELETE 请求并在控制台 filePath 上显示... 服务器不处理我的请求并发送：

jquery.min.js:4 DELETE http://localhost:3000/api/imagesbg/wedding-stock-2.jpg 403（禁止）

我做错了什么？

前面(handlebars.js)

{{#each images}}
  <div class="row">
    {{#each this}}
        <div class="col-sm-4">
            <img src="/images/background-slider/{{this}}" class="img-responsive img-thumbnail" alt="{{this}}">
            <button type="button" class="btn btn-danger pull-right imgBgDel" file-name="{{this}}" >
                Delete
            </button>
        </div>
   {{/each}}
  </div></br>
{{/each}}

脚本

$(function(){
  $('.delete-msg').hide();
  var url;
  $(".imgBgDel").on("click", function(){
      var url = 'http://localhost:3000/api/imagesbg/' + $(this).attr('file-name');
      var allObj = $(this).parent();

      $.ajax({
        url: url,
        type: 'DELETE',
        success: function(result) {
            allObj.remove();
            $('.delete-msg').slideToggle();
            setTimeout(function() {$('.delete-msg').slideToggle();}, 3000);
        },
        error: function(status, xhr) {
            console.log(status);
            alert("An error occured: " + xhr.status + " " + xhr.statusText + " + " + status);
        }
     });
  });
});

index.js

router.delete('/api/imagesbg/:id', isAdmin, function(req, res, next){
  var filePath = '/images/background-slider/' + req.params.id;
  console.log(filePath);
}); //isAdmin check if logged user is admin

---

完整的 app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var expressHbs = require('express-handlebars');
var mongoose = require('mongoose');
var session = require('express-session');
var passport = require('passport');
var flash = require('connect-flash');
var fs = require('fs');

var validator = require('express-validator');

var MongoStore = require('connect-mongo')(session);


var index = require('./routes/index');
var userRoutes = require('./routes/user');
var adminRoutes = require('./routes/admin');


var app = express();
var options = {
  user: 'xxx',
  pass: 'xxx'
};

mongoose.connect('mongodb://xxx', options);

require('./config/passport');

// view engine setup
app.engine('.hbs', expressHbs({defaultLayout: 'layout', extname: '.hbs'}) );
app.set('view engine', '.hbs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(validator());
app.use(cookieParser());
app.use(session({
  secret: 'xxx',
  resave: false,
  saveUninitialized: false,
  store: new MongoStore({
    mongooseConnection: mongoose.connection
  }),
  cookie: {
    maxAge: 180 * 60 * 1000 //how long session lives 180 minutes
  }
}));
app.use(flash());
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(path.join(__dirname, 'public')));

//bootstrap and jquery
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap


app.use(function(req, res, next){
    res.locals.login = req.isAuthenticated();
    res.locals.adminLogin = (req.isAuthenticated()&&req.user.admin);
    res.locals.session = req.session;
    next();
});


app.use('/admin', adminRoutes);
app.use('/user', userRoutes);
app.use('/', index);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

和完整的 index.js

var express = require('express');
var router = express.Router();
var BlogPost = require('../models/blogPost');
var csrf = require('csurf');
var passport = require('passport');
var fs = require('fs');




var csrfProtection = csrf();
router.use(csrfProtection);

router.get('/landing-edit', isAdmin, function(req, res, next){
var messages = req.flash('error');
fs.readdir('public/images/background-slider', function(err, files){
        if(err){
            console.log(err);
        }
        var arrTmp = [];
        var images = [];
        for(var i in files){
            if(arrTmp.length == 3){
                images.push(arrTmp);
                arrTmp = [];
            }
            arrTmp.push(files[i]);
        }
        if(arrTmp)
            images.push(arrTmp);
        console.log(images);

        res.render('admin/landing-bg-admin', {messages: messages, hasErrors: messages.length>0, images: images});
    });


});

router.delete('/api/imagesbg/:id', isAdmin, function(req, res, next){
    var filePath = '/images/background-slider/' + req.params.id;
    console.log(filePath);
    ///res.send(filePath);
});





module.exports = router;

function isAdmin(req, res, next){
    if(req.isAuthenticated() && req.user.admin){
        return next();
    }
    res.redirect('/');
}

Answer 1

router.get('/api/imagesbg/:id', isAdmin, (req, res, next)=>{
  const query = {_id: req.params.id}
  if(!ObjectID.isValid(req.params.id)){
    return res.render('error', {message: "Error didn't found the given id"});
  }
  Blogpost.findOneAndRemove({
    _id: query,
    _creator: req.user._id // if you have creator id else remove it
  }).then((post)=>{
    if(!post){
      return res.status(400).send();
    }
    res.redirect('/home');
  }).catch((e)=>{
    res.status(400).send();
  });
});

试试这个并删除脚本文件中的 ajax 代码，然后尝试 GET 请求，然后删除数据。

Answer 2

我不知道您的服务器是否使用 CORS。见https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。检查页面上的简单请求标题。

如果您的服务器正在使用 CORS，它将不允许您执行 DELETE 请求，正如从其他答案护照中看到的那样，这可能不是问题。 我建议你做的是尝试将 ajax DELETE 请求更改为 POST 请求并从那里移动。

使用type: 'POST'，您仍然可以删除图像，使用POST 和403: Forbidden 的正确功能可能不会发生。

Answer 3

我以前也遇到过类似的情况。根本原因通常是当发送 XHR 请求时，就像您使用 $.ajax 所做的那样，默认情况下请求不包含凭据。由于您使用护照进行身份验证，因此当请求在没有凭据的情况下发送到您的服务器时，护照将停止它并在它到达您的删除路由处理程序之前返回 403。

我还没有专门为$.ajax 解决这个问题，我使用了fetch API，但尝试添加：

xhrFields: {
     withCredentials: true
}

您的$.ajax 电话。如果这不起作用，请尝试添加：

username: "yourname"
password: "yourpass"

我敢打赌，根本原因是您的请求没有发送您的凭据。