尝试将文件（图像）上传到服务器时出现错误 403

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 禁止 服务器理解请求但拒绝授权。

希望公开请求被禁止的原因的服务器可以在响应负载（如果有）中描述该原因。

如果请求中提供了身份验证凭据，服务器会认为它们不足以授予访问权限。客户端不应使用相同的凭据自动重复请求。客户端可以使用新的或不同的凭据重复请求。但是，由于与凭据无关的原因，可能会禁止请求。

希望“隐藏”当前存在的禁止目标资源的源服务器可以改为响应状态码 404 Not Found。

我从您的代码中看到您没有设置任何身份验证标头。在 AngularJS 中，可以使用以下方式设置应用级别的身份验证标头：

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