Error 403 when I tried upload file(image) to server

Question

I want create server for uploading images and filling json via form. I have tried many codes and plugins for downloading to server, but I have always get 403 error. What is my mistake. I have used only jQuery or AngularJs without backend. This is a link: http://salegid.com/dist/ The last one variant:

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

Can you help me because I'm stuck. Thanks a lot.

Answer 1

403 means Forbidden request. This means that the server hasn't gotten all of the authentication credentials it needs from your request. Please check with your backend and see what headers are required.

403 FORBIDDEN The server understood the request but refuses to authorize it.

A server that wishes to make public why the request has been forbidden can describe that reason in the response payload (if any).

If authentication credentials were provided in the request, the server considers them insufficient to grant access. The client SHOULD NOT automatically repeat the request with the same credentials. The client MAY repeat the request with new or different credentials. However, a request might be forbidden for reasons unrelated to the credentials.

An origin server that wishes to "hide" the current existence of a forbidden target resource MAY instead respond with a status code of 404 Not Found.

I see from your code that you're not setting any authentication headers. In AngularJS, app level auth headers can be set using:

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