使用 ng-file-upload 上传文件时出现错误代码 405

Question

我正在尝试根据here 找到的示例使用 ng-file-upload 实现文件上传功能。

一切似乎都运行良好，除了当我尝试将文件上传到本地网络服务器时，我得到一个Error Code 405 (Method not allowed)。

这是我的标记的一部分：

<div class="block form-group">
        <label for="photo">Photos:</label>
        <input type="file" ngf-select ng-model="addCourtCtrl.picFile" name="file"
               accept="image/*" ngf-max-size="2MB" required
               ngf-model-invalid="errorFile">
        <img ng-show="addRegisterForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> 
        <button ng-click="addCourtCtrl.picFile = null" ng-show="addCourtCtrl.picFile">Remove</button>
        <br>
        <button ng-click="addCourtCtrl.uploadPic(addCourtCtrl.picFile)">
            Upload
        </button>
        <span class="progress" ng-show="addCourtCtrl.picFile.progress >= 0">
            <div style="width:{{addCourtCtrl.picFile.progress}}%"
                 ng-bind="addCourtCtrl.picFile.progress + '%'"></div>
        </span>
        <span ng-show="picFile.result">Upload Successful</span>
        <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
    </div>

这是我的上传功能的定义：

this.uploadPic = function (file) {
        file.upload = Upload.upload({
            url: '/www/images/uploads/courts',
            data: { username: __this.username, file: file },
        });

        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data;
            });
        }, function (response) {
            alert('Upload Failed');
            if (response.status > 0)
                __this.errorMsg = response.status + ': ' + response.data;
        }, function (evt) {
            // Math.min is to fix IE which reports 200% sometimes
            file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
    }

我正在使用 gulp 的网络服务器来运行此应用程序，当我使用示例中的相同上传 url 时，错误不会显示。

我一直在研究与此问题相关的一些问题，但我是 Angular 新手，我发现大多数答案都太复杂了。

我希望有人可以帮助我。提前致谢。

Answer 1

您很可能面临 CORS 问题。如果来自不同域的执行，来自浏览器的 Ajax 请求将被拒绝。您需要将 CORS 标头添加到后端。请查看此处以了解有关 CORS 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。