问题：

为什么我不能通过AngularJS的POST向我的WebApi发送帖子？

卫英悟

2023-03-14

我已经将“mytest.html”发送到IIS上，这个项目由WebApi Angularjs组成，我无法获得对我的WebApi的正确请求……我不知道为什么？

超文本标记语言代码

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    </head>

    <body>
       <div ng-app="A" ng-controller="Test">
           <form method='post' name='myForm'>
               <table width="100%">
                  <tr>
                      <td>Name：</td>
                      <td><input type='text' ng-model='user.name' name='myname' required/>
                               <span style='color:red' ng-show='myForm.myname.$dirty && myForm.myname.$invalid'>Name cannot be empty!</span>
                      </td>
                 </tr>

                  <tr>
                      <td>Gender:</td>
                      <td>
                        <div ng-repeat='s in sexs'>
                        <input type='radio' ng-model='user.sex' name='mysex' value='{{s}}'>
                        {{s}}
                        </div>
                      </td>
                 </tr>
                 <tr>
                       <td>Hobby:</td>
                       <td>
                       <select ng-model='user.love' name='selLove'>
                           <option ng-repeat='l in loves' value='{{l}}'>{{l}}</option>
                       </select>
                       <span style='color:red' ng-show='selChoice(myForm.selLove.$dirty);'>You cannot choose "Please choose"</span>
                        </td>
                 </tr>
             </table>
             <input type ='submit' value='Submit' ng-click='isDisable();'/>
           </form>
      </div>

    <script>

         var app = angular.module('A',[],function($httpProvider){

            $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
         });


         app.controller('Test',function($scope,$http){

           $scope.user = {};

           $scope.sexs = ['M','F'];
           $scope.loves = ['Please choose','Programming','Piano','Swimming'];

           $scope.user.sex = 'M';
           $scope.user.love = 'Please choose';

           $scope.selChoice= function(isDirty){
                var isFalse = (myForm.selLove.value == 'Please choose' && isDirty);
                $scope.myForm.selLove.$invalid = isFalse;
                $scope.myForm.$invalid |= isFalse;
                return isFalse;
           };

           $scope.isDisable = function(){

                $scope.selChoice(true);

                var requestData = $.param($scope.user);
                alert(requestData);

                if($scope.myForm.$invalid){
                    alert('Invalid form');
                }
                else{
                    $http({
                        method:'POST',
                        data: requestData,
                        url:'http://localhost:60031/api',
                        success: function (data){
                            alert(JSON.stringify(data));
                        }
                    });
                }
           };
         });
    </script>

      </body>
    </html>

【WebApi代码】

 namespace AngularJSDemo.Controllers
    {
        using Models;
        using System.Web.Http;

        public class DefaultController : ApiController
        {
            [HttpPost]
            public Person GetPerson([FromBody] Person p)
            {
                return p;
            }
        }
    }

[模型代码]

 namespace AngularJSDemo.Models
    {
        public class Person
        {
            public string Name { get; set; }
            public string Sex { get; set; }
            public string Love { get; set; }
        }
    }

【注册代码】

namespace AngularJSDemo
{
    using Newtonsoft.Json.Serialization;
    using System.Net.Http.Formatting;
    using System.Web.Http;

    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.Formatters.Clear();

            var jsonFormatInstance = new JsonMediaTypeFormatter();
            jsonFormatInstance.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
            config.Formatters.Add(jsonFormatInstance);

            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional,controller="Default" }
            );

        }
    }
}

请注意，我的google chrome控制台中的错误是：

有棱角的js:10695职位http://localhost:60031/api415（不支持的媒体类型）

我也尝试过使用json，但没有帮助：（

$http({
                    method:'POST',
                    data: {p:$scope.user},
                    url:'http://localhost:60031/api/Default',
                    success: function (data){
                        alert(JSON.stringify(data));
                    }
                });

我的内容类型是：

var app = angular.module('A',[],function($httpProvider){

                $httpProvider.defaults.headers.post['Content-Type'] = 'application/json';
             });

因为我有不同类型的端口，所以为了跨域，我也这样做了：

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

共有2个答案

包修贤

2023-03-14

总而言之，我认为：

1）我们真的必须使用默认值并将标头设置为“Application/json”，如下所示：

$http({
                    method:'POST',
                    data: $scope.user,
                    url:'http://localhost:60031/api/Default',
                    headers:{'Content-Type':'application/json'}
                }).success(function (data){
                        alert(JSON.stringify(data));
                    });

2）以及使我们的WebApi“CORS”（跨域），这就是最终的答案。

https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

宋鸿云

2023-03-14

URL错误

URL应该是：http://localhost:60031/api/Default

$http({
                        method:'POST',
                        data: requestData,
                        url:'http://localhost:60031/api/Default',
                        success: function (data){
                            alert(JSON.stringify(data));
                        }
                    });

此外，最好以JSON而不是urlencoded的形式提交数据

类似资料：

为什么我不能通过引用（'

我了解在lambda中捕获此（修改对象属性）的正确方法如下：但我对我所看到的以下特点感到好奇：我感到困惑（并希望得到回答）的奇怪之处在于，为什么以下方法有效：以及为什么我无法通过引用明确捕获此内容：
为什么我不能通过LeetCode练习139？

我正在看这个leetcode挑战：我的代码不能通过以下测试用例：您的输入：输出: 预期:
Angularjs发帖不向Spring JWT发送报头

GET-Request标头：重新搜索后报头
为什么我不能使用NodeMailer发送邮件？

下面是我为nodemailer做的函数- 在这里，我已经在.env文件中给出了电子邮件id和密码，我正在下面使用这个功能。客户将从我的id获得一封邮件到他的电子邮件id中。密码是正确的。但我遇到了这个错误- 错误：无效的登录名：534-5.7.9需要应用程序特定的密码。了解更多信息，请访问534 5.7.9 https://support.google.com/mail/?p=invalidse
为什么我不能从servlet发送电子邮件？

问题内容：我正在尝试从servlet发送电子邮件。也不例外，但是我的帐户中没有收到电子邮件。我正在使用以下代码： } 我现在收到以下异常：谁能告诉我为什么我没有收到电子邮件以及此代码有什么问题。提前致谢问题答案：阅读https://developers.google.com/appengine/docs/java/mail/overview 基本上停止在您的应用程序中包含任何JavaMai
为什么我不能使用python smtplib向自己发送邮件？

问题内容：我正在使用从这里获取的这段代码：我将我的gmail邮件帐户放在发件人和收款人中，但出现此错误：问题答案：您没有在计算机上运行SMTP服务器。请参阅：无法建立连接，因为目标机器主动拒绝了它

为什么我不能通过AngularJS的POST向我的WebApi发送帖子？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档