4

我有两个项目客户端和服务器端。客户端项目是纯 htmljs。服务器端是 ASP.NET MVC 4 和 Web Api。因为有两个项目我需要启用 CROS 功能。我添加到服务器的webconfig 中：

<system.webServer>
 <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

正在运行的 Ajax Post 版本：

$.post(url, appContext).done(
                function(data, textStatus, jqXHR) {
                    successFn(data, textStatus);
                })
                .fail(
                    function(jqXHR, textStatus, err) {
                        errorFn(err, textStatus);
                    });

角度 $http 发布版本不起作用：

 $http({
                url: url,
                method: 'POST',
                params: { appContext: appContext },
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                    /*'Accept': 'text/json'*/}
            }).success(successFn).error(errorFn);

当我使用 $http 时，出现两个错误：

  1. 选项 url 405（不允许的方法）
  2. POST url 500（内部服务器错误）

ASP.NET MVC 方法是

[System.Web.Http.HttpPost]
public List<Module> GetModules([FromBody]SessionContext appContext)
{
 return  CreateModules();
}

编辑：

Angular 模型的配置：

var emsApp = angular.module('EmsWeb', ['ui.bootstrap']);
emsApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {

    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

我在浏览器中看到的 OPTIONS 请求的标头：

Request URL:http://localhost/EmsWeb/api/ModuleApi/GetModules?appContext=%7B%22globalDate%22%3A%22Mon%2C%2008%20Jul%202013%2013%3A09%3A35%20GMT%22%2C%22userToken%22%3A%22AlexToken%22%7D
Request Method:OPTIONS
Status Code:405 Method Not Allowed

Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, origin, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
DNT:1
Host:localhost
Origin:http://localhost:50463
Referer:http://localhost:50463/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
Query String Parametersview sourceview URL encoded
appContext:{"globalDate":"Mon, 08 Jul 2013 13:09:35 GMT","userToken":"AlexToken"}

Response Headers
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Length:76
Content-Type:application/json; charset=utf-8
Date:Mon, 08 Jul 2013 13:09:35 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET

有什么想法为什么角度方式不起作用？

更新问题，因为事实证明它很愚蠢：因为我使用了参数而不是数据：

 $http({
                url: url,
                method: 'POST',
                params: { appContext: appContext },
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                    /*'Accept': 'text/json'*/}
            }).success(successFn).error(errorFn);

角度转换为 GetRequest。也不需要 ContentType。所以实际的代码是

 $http({method: 'POST',
            url: url,                
            data: appCtx,
        }).success(successFn).error(errorFn);

所以几乎解决了，我看到角度仍然发出 OPTIONS 请求失败但发布请求通过......

所以对此的任何想法都值得赞赏

4

3 回答 3

8

我的问题是由于两个原因：我使用了参数而不是数据

 $http({
                url: url,
                method: 'POST',
                params: { appContext: appContext },
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                    /*'Accept': 'text/json'*/}
            }).success(successFn).error(errorFn);

角度转换为 GetRequest。也不需要 ContentType。所以实际的代码是

 $http({method: 'POST',
            url: url,                
            data: appCtx,
        }).success(successFn).error(errorFn);

在服务器端，我需要处理 OPTIONS 请求的东西。一种方法是使用 [System.Web.Http.AcceptVerbs("OPTIONS")] 装饰方法，我认为这不是最好的方法。另一种方法是添加自定义消息处理程序。我还在研究它...

于 2013-07-09T08:56:23.143 回答
0

如果您的 ajax 正在工作，那么看起来事物的角度方面没有配置。在使用 $http 之前添加它（在您的控制器设置中）。

$http.defaults.useXDomain = true;

请参阅这个家伙 jsfiddle 的工作示例：http: //jsfiddle.net/ricardohbin/E3YEt/

编辑：根据您对问题的评论和编辑，这篇文章可能会对您有所帮助：http: //www.codeguru.com/csharp/.net/net_asp/using-cross-origin-resource-sharing-cors-in-asp .net-web-api.html

于 2013-07-08T14:11:10.177 回答
0

- 确保 get 和 Post 的语法以及发送参数的方式 - 检查您期望在目标操作或方法中的预期参数，并确保发送和接收参数相同。

于 2015-12-20T14:15:50.793 回答