Obtenir le code d'erreur 405 lors du téléchargement de fichiers en utilisant ng-file-upload

Question

J'essaie d'implémenter une fonctionnalité de téléchargement de fichier en utilisant ng-file-upload basé sur un exemple trouvé here.

Tout semble fonctionner correctement, sauf que lorsque j'essaie de télécharger le fichier sur mon serveur Web local, j'obtiens un Error Code 405 (Method not allowed).

Voici une partie de mon balisage:

<div class="block form-group"> 
     <label for="photo">Photos:</label> 
     <input type="file" ngf-select ng-model="addCourtCtrl.picFile" name="file" 
       accept="image/*" ngf-max-size="2MB" required 
       ngf-model-invalid="errorFile"> 
     <img ng-show="addRegisterForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> 
     <button ng-click="addCourtCtrl.picFile = null" ng-show="addCourtCtrl.picFile">Remove</button> 
     <br> 
     <button ng-click="addCourtCtrl.uploadPic(addCourtCtrl.picFile)"> 
      Upload 
     </button> 
     <span class="progress" ng-show="addCourtCtrl.picFile.progress >= 0"> 
      <div style="width:{{addCourtCtrl.picFile.progress}}%" 
       ng-bind="addCourtCtrl.picFile.progress + '%'"></div> 
     </span> 
     <span ng-show="picFile.result">Upload Successful</span> 
     <span class="err" ng-show="errorMsg">{{errorMsg}}</span> 
    </div> 

et voici la définition de ma fonction de téléchargement:

this.uploadPic = function (file) { 
     file.upload = Upload.upload({ 
      url: '/www/images/uploads/courts', 
      data: { username: __this.username, file: file }, 
     }); 

     file.upload.then(function (response) { 
      $timeout(function() { 
       file.result = response.data; 
      }); 
     }, function (response) { 
      alert('Upload Failed'); 
      if (response.status > 0) 
       __this.errorMsg = response.status + ': ' + response.data; 
     }, function (evt) { 
      // Math.min is to fix IE which reports 200% sometimes 
      file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
     }); 
    } 

J'utilise le serveur web de gulp pour exécuter cette application et l'erreur ne afficher lorsque j'utilise la même URL de téléchargement de l'exemple.

J'ai regardé quelques questions liées à ce problème mais je suis nouveau à Angular et je trouve la plupart des réponses un peu trop compliquées.

J'aimerais que quelqu'un puisse m'aider. Merci d'avance.

Answer 1

Vous êtes probablement confronté au problème CORS. Les requêtes Ajax du navigateur sont rejetées si elles sont effectuées à partir de domaines différents. Vous devez ajouter des en-têtes CORS à votre backend. S'il vous plaît, regardez ici pour en savoir plus sur CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.