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

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

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

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

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

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

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

1 个答案: