Question

我正在使用AngularJS来调用我的webAPI并获得以下错误...

Failed to load resource: the server responded with a status of 405 (Method Not Allowed) http://localhost:52240/api/PcpEnvironment/
XMLHttpRequest cannot load http://localhost:52240/api/PcpEnvironment/. Invalid HTTP status code 405

以下是我对webapi的致电......

    angular.module('PcPortal')

.controller('UpdateEnvironmentController', UpdateEnvironmentController);

UpdateEnvironmentController.$inject = ['$scope', '$http', '$rootScope'];

function UpdateEnvironmentController($scope, $rootScope, $http) {

    $scope.selectedEnv = $rootScope.selectedEnv;

    $scope.updateEnv = function () {
        alert('Updating env');
        var envData = angular.toJson($rootScope.selectedEnv);

        var config = {
            method: 'POST',
            url: 'http://localhost:52240/api/PcpEnvironment/Post/',
            headers: {
                "Content-Type": "application/json"
            },
            data: { env: envData }
        };

        $http(config)
            .then(function successCallback(response) {
                alert(response);
            },
                function errorCallback(response) {
                    alert('Failed: ' + response);
                });

    }
};

WebApI方法......

 [HttpPost]
        public bool Post(PcpEnvironment env)
        {
            return _service.UpdateEnvironment(env);
        }

在我的webapiconfig文件中...我在下面添加了，...

System.Web.Http.GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();
            config.Formatters.Insert(0, new System.Net.Http.Formatting.JsonMediaTypeFormatter());

f我删除了一个$http ...我的绑定停止工作...而对于var webadmin = angular.module('PcPortal',[]);我有单独的bootstrap文件来执行此操作...这里我只是获取相同应用程序的引用

为了让我的绑定工作......我需要改变输入顺序，如下所示......

UpdateEnvironmentController.$inject = ['$scope', '$http', '$rootScope'];

function UpdateEnvironmentController($scope, $rootScope, $http)

随着控制器的新定义被建议......我得到以下错误...

TypeError: object is not a function

此错误用于使用$ http来调用服务器。可以帮助解决这里的问题。

Answer 1

我找到了问题的答案。经过很多很多谷歌确定。

默认情况下，POSTAPI中不允许使用PUT方法。您需要使用CORS包或其他解决方案（我用来解决我的问题）...

在web.config中添加以下配置

<system.webServer>
     <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" />
        <add name="Access-Control-Allow-Credentials" value="true" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

您还需要刷新OPTIONS请求。在Global.aspx文件中添加以下代码...

protected void Application_BeginRequest()
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.Flush();
            }
        }

Answer 2

从$ inject

中删除一个$http

UpdateEnvironmentController.$inject = ['$scope', '$http', '$rootScope'];

此外，在模块中添加一个空方括号

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

Answer 3

最好的方法是使用CORS包。只需在Nuget软件包控制台

中安装软件包Owin.Cors即可

Install-Package Microsoft.Owin.Cors

在此之后，您需要在startup.cs中添加配置。它看起来像下面的类似。

public void Configuration(IAppBuilder app)
        {
            HttpConfiguration config = new HttpConfiguration();

            ConfigureOAuth(app);

            WebApiConfig.Register(config);
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
            app.UseWebApi(config);

        }

无法加载资源：服务器响应从Angularjs到WebApi的状态为405（方法不允许）

3 个答案: