angular.js:9827 POST http://localhost:64340/Content 405（方法不允许）答案

【问题标题】：angular.js:9827 POST http://localhost:64340/Content 405 (Method Not Allowed)angular.js:9827 POST http://localhost:64340/Content 405（方法不允许）
【发布时间】：2016-09-27 03:45:51
【问题描述】：

任何人都可以帮助我解决这个问题...... 我正在尝试浏览文件并希望使用 angular 保存到某个文件夹中。这是我的 HTML 代码

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp">

    <div ng-controller="myCtrl">
        <input type="file" file-model="myFile" />
        <button ng-click="uploadFile()">upload me</button>
    </div>
    <script src="app/fileUpload.js"></script>  
</body>
</html>

我的 JS 控制器文件：

var myApp = angular.module('myApp', []);

myApp.config([
        '$httpProvider',
        function($httpProvider) {
            $httpProvider.defaults.withCredentials = true;
        }
]);

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function (file, uploadUrl) {
        var fd = new FormData();
        fd.append('file', file);

        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: { 'Content-Type': undefined }
        })

        .success(function () {
        })

        .error(function () {
        });
    }
}]);

myApp.controller('myCtrl', ['$scope', 'fileUpload', function ($scope, fileUpload) {
    $scope.uploadFile = function () {
        var file = $scope.myFile;

        console.log('file is ');
        console.dir(file);

        var uploadUrl = "/Content";

        fileUpload.uploadFileToUrl(file, uploadUrl);
    };
}]);

我的 Web.config 文件：我添加了“Access-Control-Allow-Origin”，但它仍然无法正常工作。有什么我想念的吗？

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>

  <system.webServer>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>``

错误图片：

【问题讨论】：

标签： angularjs html file-upload

【解决方案1】：

POST 方法经常会出现 405 错误。您可能试图在网站上引入某种输入表单，但并非所有 ISP 都允许处理表单所需的 POST 方法。

服务器需要您在请求标头中指定Content-Type 和/或Accept。

$http.post(uploadUrl, fd, {
    transformRequest: angular.identity,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
})

【讨论】：

好的，你可以试试在<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS, HEAD" />中添加HEAD
感谢 Pratik 的帮助，但这也没有解决问题。
其中大部分已经是默认属性。向已设置为默认的请求添加属性是浪费精力
添加 ContentType "application/x-www-form-urlencoded"。并将您的 POST 数据转换为序列化的“key1=val1&key2=val2”字符串。

【解决方案2】：

在服务器端将此header 添加到响应中：

Access-Control-Allow-Methods:POST, GET, PUT, DELETE, OPTIONS

如果你的服务器使用 PHP，我使用这个脚本：

    header('Content-Type: application/json');
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Requested-With, X-YOUR-CUSTOM-HEADER');
    header('Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS');

【讨论】：