Node.js AJAX删除403禁止

Question

I try to create way to delete images from server. For now i just want to handle DELETE request and show on console filePath... Server don't handle my request and send:

jquery.min.js:4 DELETE http://localhost:3000/api/imagesbg/wedding-stock-2.jpg 403 (Forbidden)

What i'm doing wrong?

Front(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}}

Script

$(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

---

full 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;

and full 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

I've had something very similar to this before. The root cause is usually that when sending an XHR request like you're doing with $.ajax , the request doesn't include credentials by default . Since you're using passport for authentication, when the request goes to your server without the credentials, passport is stopping it and returning a 403 before it gets to your delete route handler.

I haven't solved this problem for $.ajax specifically, I used the fetch API, but trying adding:

xhrFields: {
     withCredentials: true
}

to your $.ajax call. If that doesn't work, try adding:

username: "yourname"
password: "yourpass"

I'll bet that the root cause is that your request isn't sending your credentials.

Answer 2

I don't know if your server uses CORS. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS . Check Simple Requests title on the page.

If your server is using CORS, it won't allow you to do DELETE request as seen from other answer passport may not be the issue. What I would suggest you doing is that try to change that ajax DELETE request to a POST request and move from there.

use type: 'POST' , and you will still be able to remove the image, use the right functions with POST and 403: Forbidden will probably not occur.

Answer 3

 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(); }); }); 

Try this and remove ajax code in your script file and try to GET the request and then delete the data.