javascript - 当我尝试将文件(图像)上传到服务器时出现错误 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 表示禁止请求。这意味着服务器尚未从您的请求中获取所需的所有身份验证凭据。请检查您的后端并了解需要哪些 header 。

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.

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

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