加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

asp.net-mvc-4 – ajax post works vs. angularjs $http无法使用

发布时间:2020-12-16 07:19:20 所属栏目:asp.Net 来源:网络整理
导读:我有两个项目客户端和服务器端. 客户端项目是纯htmljs.服务器端是ASP.NET MVC 4和Web Api. 因为我需要两个项目来启用CROS功能. 我添加到服务器的webconfig中: system.webServer httpProtocol customHeaders add name="Access-Control-Allow-Origin" value="
我有两个项目客户端和服务器端.
客户端项目是纯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,err) {
                        errorFn(err,textStatus);
                    });

angular $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时,我收到两个错误:

>选项url 405(方法不允许)
> POST url 500(内部服务器错误)

ASP.NET MVC方法是

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

编辑:

角度模型的配置:

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

任何有关角度方式不起作用的想法都值得赞赏吗?

更新问题,因为事实证明是非常愚蠢的:
因为我使用了params而不是数据:

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

angular转换为GetRequest.也不需要ContentType.
所以实际代码是

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

所以ALMOST解决了,我看到angular仍然发出OPTIONS请求失败但是post请求通过…

所以对这一点的任何想法都表示赞赏

解决方法

我的问题是由于两个原因:
我使用params而不是数据

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

angular转换为GetRequest.也不需要ContentType.所以实际代码是

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

在服务器端
我需要处理OPTIONS请求的东西.一种方法是使用[System.Web.Http.AcceptVerbs(“OPTIONS”)]来装饰方法,我认为这不是最好的方法.
另一种方法是添加Custom Message Handler.我还在研究它……

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读