调用web api时$ http调用两次

时间:2016-10-07 09:55:19

标签: angularjs asp.net-mvc asp.net-web-api2

我使用WEB API创建了ASP.NET MVC WEB API 2.0。 Web API包含loginregister等方法。
我使用AngularJS来调用WEB API方法,但它会调用两次。对于例如当我调用POST方法时,它首先调用OPTION(我没有创建任何OPTION方法),然后调用POST方法。
我的代码:(用于登录)
HTML:

<div class="container" ng-controller="UserAccount">
    <form ng-submit="loginNow(user)">
        <input type="email" placeholder="Enter Email" required ng-model="user.email" id="txtEmail" class="form-control" />
        <br />
        <input type="password" placeholder="Enter Password" required ng-model="user.password" id="txtPwd" class="form-control" />
        <br />
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>


AngularJS控制器:

$scope.loginNow = function (user) {
        $http.post(rootURL + "login", { email: user.email, password: user.password })
            .success(function (data) {
                if (data.id > 0) {
                    sessionStorage.setItem('userid', data.id);
                    window.location = '/';
                }
            });
}


WEB API:

public class UsersController : ApiController
    {
        private UserEntities db = new UserEntities();

        // GET: api/Users
        public IQueryable<Users_tbl> GetUsers_tbl()
        {
            return db.Users_tbl;
        }

        [ActionName("login")]
        public IHttpActionResult PostUser_Login(string email, string password)
        {
            int id = db.Users_tbl.Where(a => a.email == email && a.password == password).Select(a => a.id).SingleOrDefault();
            if(id <= 0)
            {
                return NotFound();
            }
            return Ok(id);
        }

        [ActionName("register")]
        public int PostUser_Register(string email, string password)
        {
            int id = db.Users_tbl.Where(a => a.email == email).Select(a => a.id).SingleOrDefault();
            if(id > 0)
            {
                return 1;
            }
            Users_tbl user = new Users_tbl();
            user.email = email;
            user.password = password;
            try
            {
                db.Users_tbl.Add(user);
                db.SaveChanges();
            }
            catch
            {
                return 2;
            }
            return 0;
        }


        // GET: api/Users/5
        [ResponseType(typeof(Users_tbl))]
        public IHttpActionResult GetUsers_tbl(int id)
        {
            Users_tbl users_tbl = db.Users_tbl.Find(id);
            if (users_tbl == null)
            {
                return NotFound();
            }

            return Ok(users_tbl);
        }


        // PUT: api/Users/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutUsers_tbl(int id, Users_tbl users_tbl)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != users_tbl.id)
            {
                return BadRequest();
            }

            db.Entry(users_tbl).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!Users_tblExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        [ActionName("profile")]
        // POST: api/Users
        [ResponseType(typeof(Users_tbl))]
        public IHttpActionResult PostUsers_tbl(Users_tbl users_tbl)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.Users_tbl.Add(users_tbl);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = users_tbl.id }, users_tbl);
        }

        // DELETE: api/Users/5
        [ResponseType(typeof(Users_tbl))]
        public IHttpActionResult DeleteUsers_tbl(int id)
        {
            Users_tbl users_tbl = db.Users_tbl.Find(id);
            if (users_tbl == null)
            {
                return NotFound();
            }

            db.Users_tbl.Remove(users_tbl);
            db.SaveChanges();

            return Ok(users_tbl);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool Users_tblExists(int id)
        {
            return db.Users_tbl.Count(e => e.id == id) > 0;
        }
    }

2 个答案:

答案 0 :(得分:6)

这是浏览器的默认行为。在发送corss-domain AJAX调用之前,浏览器会发送pre-flight requestOPTION请求)Why?

了解如何最大限度地减少飞行前请求的here

<强>更新

如果您确实不想发送飞行前请求,可以选择不违反同源政策(SOP)。可能的解决方案可以是:

JSONP :这是一种利用同源安全策略的HTML脚本元素例外的技术。脚本标记可以从不同的域加载JavaScript,并且可以将查询参数添加到脚本URI,以将信息传递给托管脚本的服务器,以获取您希望访问的资源。 JSONP服务器将返回在浏览器中评估的JavaScript,该浏览器调用页面上已经商定的JavaScript函数将服务器资源数据传递到您的页面。

服务器端代理:绕过同源策略执行跨域请求的另一种方法是根本不做任何跨域请求!如果您使用驻留在域中的代理,则只需使用此代码从后端代码访问外部服务,并将结果转发到客户端代码。由于请求代码和代理位于同一域中,因此不会违反SOP。

<强>更新 您可以从Web API 2响应OPTIONS请求,这样就不会抛出405或404.请查看此处https://stackoverflow.com/a/37425746/2509344

答案 1 :(得分:0)

这种情况正在发生,因为当页面正在加载时,在初始化期间,它会发生一次,然后当你按下登录时它会再次调用。