【问题标题】:ng-file-upload cross domain errorng-file-upload 跨域错误
【发布时间】:2016-04-29 09:21:12
【问题描述】:

当我使用这样的简单 javascript 请求时,我可以通过邮递员甚至通过我的应用程序发布 base 64 编码图像:

var data=       "userPhoto=data%3Aimage%2Fjpeg%3Bbase64%2C%2F9j%2F4AAQSkZJRgABAQEAS ................(image data) Rd1bbfc2B%2FdDXGWxWHtA2N6NrL%2BLNf6wIa92a5m5v2s0c7tObhgdJMdV6Rm4mt7YkqukTMsv2vVsgl5j73tQasFOHYMP3nqf%2F%2FZ";
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
  console.log(this.responseText);
 }
});

xhr.open("POST", "http://localhost:8000/test2");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("postman-token", "b98cbdf1-8918-b8fb-6b50- a626c301cffc");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);

但是当我使用从ng-file-upload复制的简单代码时

HTML:

  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}">Select</div>

脚本:

var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
// upload later on form submit or something similar
$scope.submit = function() {
  if ($scope.form.file.$valid && $scope.file) {
    $scope.upload($scope.file);
  }
}; 

我收到一个跨域错误:

XMLHttpRequest 无法加载“url”。跨源请求仅支持协议方案:http、data、chrome、chrome-extension、https、chrome-extension-resource。

基本上我已经尝试了所有不同的组合,从实际场景到简化版本再到网站上最基本的用例。它只是我或角度错误真的很令人沮丧,因为它们之间有很多层。 C# 肯定没那么难

【问题讨论】:

    标签: javascript angularjs cross-domain ng-file-upload


    【解决方案1】:

    好吧,想通了。在上传功能中,我使用了整个 URL http://localhost:8000/test1,但我应该只使用 /test1

    $scope.upload = function (file) {
        Upload.upload({
            url: '/test1',
            data: {'userPhoto':file}
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded.    Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        });
    };
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-11-15
      • 1970-01-01
      • 2017-04-30
      • 1970-01-01
      • 1970-01-01
      • 2015-11-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多