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

Posted 2023-03-31

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

【英文标题】：Error 403 when I tried upload file(image) to server

【发布时间】：2017-02-11 01:13:20

【问题描述】：

我想创建服务器以通过表单上传图像和填充 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"   >
        <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]);
        );
      
    
  
]);

你能帮我吗，因为我被困住了。非常感谢。

【参考方案1】：

403 表示禁止请求。这意味着服务器尚未从您的请求中获得所需的所有身份验证凭据。请检查您的后端并查看需要哪些标头。

403 禁止 服务器理解请求但拒绝授权。

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

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

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

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

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

【讨论】：

嗨。感谢您的回答。我需要在/* ... */; 那里放什么？我可以通过简单的 ftp 访问我的服务器。