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

Posted 2023-03-03

【中文标题】加载资源失败：服务器从 Angularjs 响应状态为 405（不允许方法）到 WebApi

【英文标题】：Failed to load resource: the server responded with a status of 405 (Method Not Allowed) from Angularjs to WebApi

【发布时间】：2017-10-19 01:44:57

【问题描述】：

我正在使用 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',[]);，我有单独的引导文件来执行此操作...这里我只是获取同一个应用程序的参考。

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

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

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

根据建议的控制器的新定义...我遇到了错误...

TypeError: object is not a function

这个错误是因为使用 $http 来调用服务器。 可以帮助解决这里的问题。

【问题讨论】：

如果一切都是服务器端的文件，表单状态码 405（不允许方法），可能的原因可能是您的数据不正确。在配置中，您可以尝试直接将数据作为envData 传递。而不是添加env

【参考方案1】：

我找到了我的问题的答案。经过很多很多谷歌之后肯定会。

默认情况下 POST，webAPI 中不允许使用 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();
            
        

【参考方案2】：

从 $inject 中删除一个 $http

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

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

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

【讨论】：

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

然后从js中移除模块

那么我将如何将我的控制器与模块连接起来。我已经用更多细节更新了我的问题。请看一下。

只使用全局变量来引用模块

感谢您的帮助...我的问题得到了解决...***.com/questions/27504256/…

【参考方案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);