Node.js AJAX Löschen 403 Forbidden

Question

Ich versuche, eine Möglichkeit zum Löschen von Bildern vom Server erstellen. Vorerst möchte ich DELETE Anfrage nur zu handhaben und zeigen auf Konsole filePath ... Server nicht die Anforderung bearbeiten und senden:

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

Was mache ich falsch?

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 

---

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

und voll 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

ich vor etwas sehr ähnlich wie diese gehabt haben. Die Ursache liegt in der Regel darin, dass beim Senden einer XHR-Anforderung, wie Sie es mit $.ajax, tun, die Anforderung standardmäßig keine Anmeldeinformationen enthält. Da Sie den Passport für die Authentifizierung verwenden und die Anforderung ohne die Anmeldeinformationen an den Server gesendet wird, stoppt der Passport die Nachricht und gibt eine 403 zurück, bevor sie an den Delete-Route-Handler gesendet wird.

Ich habe dieses Problem nicht für $.ajax speziell gelöst, ich habe die fetch API verwendet, sondern versuchen, und fügte hinzu:

xhrFields: { 
    withCredentials: true 
} 

zu Ihrem $.ajax Anruf. Wenn das nicht funktioniert, versuchen Sie:

username: "yourname" 
password: "yourpass" 

ich, dass die Ursache wette, ist, dass Ihre Anfrage wird Ihre Anmeldeinformationen nicht gesendet werden.

Answer 2

Ich weiß nicht, ob Ihr Server CORS verwendet. Siehe https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS. Überprüfen Sie Einfache Anfragen Titel auf der Seite.

Wenn Ihr Server CORS verwendet, wird es Ihnen nicht ermöglichen, DELETE Anfrage zu tun, wie aus anderen Antwort Pass gesehen möglicherweise nicht das Problem sein. Was ich vorschlagen würde Sie tun, ist, dass versuchen, diese Ajax DELETE Anfrage an eine POST Anfrage ändern und von dort bewegen.

Verwendung type: 'POST', und Sie werden immer noch in der Lage sein, das Bild zu entfernen, verwenden Sie die richtigen Funktionen mit POST und 403: Forbidden wird wahrscheinlich nicht auftreten.