サーバーにファイル（画像）をアップロードしようとしたときにエラーが発生しました

Question

画像をアップロードしてフォームを使用してjsonを作成するためのサーバーを作成します。私はサーバーにダウンロードするための多くのコードとプラグインを試しましたが、私は常に403エラーが発生しています。私の間違いは何ですか？バックエンドなしでjQueryまたはAngularJsのみを使用しました。これは、リンクです：http://salegid.com/dist/最後の一の変形例：

HTML

<div ng-app="myApp"> 
     <div ng-controller="MyController"> 
     <input type="file" fileread="uploadme" /> 
     <img src="{{uploadme}}" width="100" height="50" alt="Image preview..."> 
     <br/> 
     <p> 
      Image dataURI: 
     <pre>{{uploadme}}</pre> 
     </p> 
     <br/> 
     <button ng-click="uploadImage()">upload image</button> 
     </div> 
    </div> 

私がこだわっているので、JS

var app = angular.module('myApp', [ 
    'ngResource', 
    'ngRoute' 
]) 
    .config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: 'index.html', 
     controller: 'MyController', 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 
    }]) 
    .controller('MyController', ['$scope', '$http', function($scope, $http) { 

    //the image 
    $scope.uploadme; 

    $scope.uploadImage = function() { 
     var fd = new FormData(); 
     var imgBlob = dataURItoBlob($scope.uploadme); 
     fd.append('file', imgBlob); 
     $http.post(
     'imageURL', 
     fd, { 
      transformRequest: angular.identity, 
      headers: { 
      'Content-Type': undefined 
      } 
     } 
     ) 
     .success(function(response) { 
      console.log('success', response); 
     }) 
     .error(function(response) { 
      console.log('error', response); 
     }); 
    }; 


    //you need this function to convert the dataURI 
    function dataURItoBlob(dataURI) { 
     var binary = atob(dataURI.split(',')[1]); 
     var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; 
     var array = []; 
     for (var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
     } 
     return new Blob([new Uint8Array(array)], { 
     type: mimeString 
     }); 
    }; 

    }]) 
    .directive('fileread', [ 
    function() { 
    return { 
     scope: { 
     fileread: '=' 
     }, 
     link: function(scope, element, attributes) { 
     element.bind('change', function(changeEvent) { 
      var reader = new FileReader(); 
      reader.onload = function(loadEvent) { 
      scope.$apply(function() { 
       scope.fileread = loadEvent.target.result; 
      }); 
      } 
      reader.readAsDataURL(changeEvent.target.files[0]); 
     }); 
     } 
    } 
    } 
]); 

は、あなたが私を助けることができます。どうもありがとう。

Answer 1

403は禁止要求を意味します。これは、サーバーが要求から必要なすべての認証資格情報を取得していないことを意味します。バックエンドに確認し、必要なヘッダーを確認してください。

403 FORBIDDEN サーバーは要求を理解しましたが、許可を拒否しました。

なぜ要求が禁止されたのかを公表したいサーバーは、その理由を応答ペイロード（存在する場合）に記述することができます。

要求で認証資格情報が提供された場合、サーバーはアクセス資格を与えるには不十分であるとみなします。クライアントは同じ信任状で要求を自動的に繰り返すべきではない（SHOULD NOT）。クライアントは新しいか異なる資格で要求を繰り返すかもしれません。ただし、資格情報と無関係の理由で要求が禁止されている可能性があります。

禁止されたターゲットリソースの現在の存在を "隠す"ことを望むオリジンサーバは、代わりに状態コード404が見つかりませんでした。

あなたのコードからは、認証ヘッダーを設定していないことがわかります。 AngularJSでは、アプリレベルの認証ヘッダーは次のように設定できます。

app.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.headers.common['Authorization'] = /* ... */; 
}])