我正面临与使用angularjs调用webapi相关的问题 [英] I am facing issue related to call webapi using angularjs

问题描述

嗨我正在研究MVC，Angularjs，Webapi（我正在使用UnityConfig）项目，在我的解决方案中，webapi项目和MVC项目是单独的项目因此因为这个原因我面临问题调用我的api所以解决这个问题我已经使用此策略添加了跨源资源共享（CORS）我是Abel调用GET方法但是当我尝试调用POST方法时它给了我这个错误（预检的响应有无效的HTTP状态代码400），我正在使用angularjs调用我的WebAPI的服务，但我无法调用WebAPI，我正在分享我的代码请审核，请尽快帮我解决这个问题。



我尝试了什么：

hi i am working on MVC ,Angularjs ,Webapi( i am using UnityConfig) Project where in my solution webapi project and MVC project are seprate project so becasuse of that reason i am facing problem to call my api so to solve this issue i have added Cross Origin Resource Sharing (CORS) using this policy i am Abel to call GET method but when i am trying to call POST method it gives me this error (Response for preflight has invalid HTTP status code 400),i am using angularjs services to call my WebAPI but i am Unable to call WebAPI, i am sharing my code please review and please help me to sort out this issue ASAP.

What I have tried:

//Cal service For Insert Gender Details//
//this is my controller//
    $scope.Save = function Save(GenderBO) {
        var promise = GenderServ.post(GenderBO);
        promise.then(function (Response) {
           $scope.Gender = Response.data;
        }, function (error) {           
            $scope.Message = "error" + error.status;
        });
    };


//this is my angular Service//
App.service('GenderServ', function ($http) {


// My GET Method is working in this case//
    this.get = function () {      
        var Response = $http.get("http://localhost:57185/api/GenderAPI/");
        return Response;
    };
    
//i am try both way using ajax call or using angular call but no any Responce//


    this.post =(function (GenderBO) {
        $.ajax({
        type: 'POST',
        url: 'http://localhost:57185/api/GenderAPI/',
        data: JSON.stringify(GenderBO),
        contentType: 'application/json',
        dataType: 'json',
        success: function (GenderBO) { console.log(GenderBO) }
        });
    });

//Or this way 
    this.post = function (GenderBO) {
        var Response = $http({
            method: "post",
            url: "http://localhost:57185/api/GenderAPI/Insert",
            data: GenderBO,
            contentType: "application/json",
           // headers: { 'Content-Type': 'application/json' },
            dataType: 'json',
        });
        return Response;
    }


//My WEBAPI code(C#)//

[EnableCors(origins: "http://localhost:57185", headers: "*", methods: "*")]
    public class GenderAPIController : ApiController
    {
        IRepository<genderbo,> _repository;
        public GenderAPIController(IRepository<genderbo,> repo)
        {
            _repository = repo;
        }

        // GET api/genderapi
       
       [ResponseType(typeof(IEnumerable<genderbo>))]        
        public IHttpActionResult Get()
        {
            var Response = _repository.Get();
            return Ok(Response);
        }

       [HttpPost]
       [ResponseType(typeof(GenderBO))]
       public IHttpActionResult Insert(GenderBO id)
       {
           var Response = _repository.Insert(id);
           return Ok(Response);
       }

///added this code in my WebApiConfig//
 config.EnableCors(cors);

//i have done this change in my WEBAPI projects Web.config(Access-Control-Allow-Origin)//</genderbo>

推荐答案

scope.Save = function保存（GenderBO）{
var promise = GenderServ.post（GenderBO）;
promise.then（函数（响应）{

scope.Save = function Save(GenderBO) { var promise = GenderServ.post(GenderBO); promise.then(function (Response) {

scope.Gender = Response.data;
}，函数（错误）{

scope.Gender = Response.data; }, function (error) {

scope.Message = error + error.status;
}） ;
};


// 这是我的角度服务//
App.service（' GenderServ'，function（

scope.Message = "error" + error.status; }); }; //this is my angular Service// App.service('GenderServ', function (

这篇关于我正面临与使用angularjs调用webapi相关的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！