简体   繁体   English

ng-file-upload跨域错误

[英]ng-file-upload cross domain error

I am able to post a base 64 encoded image via postman and even via my app when i use simple javascript request like this: 当我使用像这样的简单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);

But when i use the simple code copied from ng-file-upload 但是当我使用从ng-file-upload复制的简单代码时

HTML: 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>

Script: 脚本:

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);
  }
}; 

I get a cross domain error: 我收到跨域错误:

XMLHttpRequest cannot load 'url'. XMLHttpRequest无法加载“ URL”。 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 跨源请求仅支持以下协议方案:http,数据,chrome,chrome扩展名,https,chrome-extension-resource。

Basically I have tried all different combinations starting from actual scenario to simplified version to the most basic use case on the site. 基本上,我尝试了从实际方案到简化版本到站点上最基本用例的所有不同组合。 Its just me or angular errors are really frustrating because of so many layers in between. 由于介于两者之间的层数众多,因此我或角度误差确实令人沮丧。 C# was definitely not so hard C#绝对不是那么难

Okay figured it out. 好,知道了。 In the upload function i was using the entire URL http://localhost:8000/test1 , but I was supposed to use just /test1 在上载功能中,我使用了整个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);
    });
};

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM