CODEWITHSUNDEEP
c#angularjsasp.net-web-apiasp.net-web-api2
rajula
rajula

Reputation: 47

Run AngularUI and Asp.net WebApi on different ports

I have 2 seperate project in different ports, one is asp.net web api and another is angularjsUI, which consumes the webapi service. When i call webapi service from my angular project, the service is not hit.

If both service and angularUi are in same project then there is no issue , i am able to use the service.

Technology used: Vs2015, Angularjs1.6, WebApi2

How to make communication between these two seperate projects in different ports successful. Example :

Step 1: These files are in my angularUI project

LoginController.js

        $scope.RegisterClick=function(myregister) {
          var apiRoute = "http://localhost:51002/api/LoginApi";
          var registerdata = LoginService.post(apiRoute, registeruserdetails);
        }

LoginService.js

        myqcapp.service("LoginService", function ($http) { 
        this.post = function (apiRoute, Model) {   
        var loginresult = $http({
                method: "post",
                url: apiRoute,
                dataType: 'json',
                headers: {
                    "Content-Type": "application/json; charset=utf-8"
                },
                data: Model
            });
            return loginresult;
        }   
        });

Step 2: In my WebApi project

LoginApiController.cs

public class LoginApiController : ApiController
{
    [ResponseType(typeof(Register))]
    public IHttpActionResult Post(Register registercls)
    {
        if (ModelState.IsValid)
        {
            registerbs.Add(registercls);
            return CreatedAtRoute("DefaultApi", new { id = registercls.Userid }, registercls);
        }
        else
        {
            return BadRequest(ModelState);
        }
    }
}

WebApiConfig.cs

public static void Register(HttpConfiguration config)
{         
    // Web API routes
    config.MapHttpAttributeRoutes();
    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{Controller}/{id}",
        defaults: new {
            Controller="LoginApi",
            id = RouteParameter.Optional 
        }
    );
}

Upvotes: 0

Views: 567

Answers (1)

IteratioN7T
IteratioN7T

Reputation: 356

You need to enable cross site scripting on your Project/web app that serves the web API.

Your UI/API consumer is in separate project/port and if cross site scripting (CORS) is disabled the API server won't consider the request as " same origin request ".

You need to call EnableCors() inside the Register(HttpConfiguration conf) method of WebApiConfig class in App_Start folder. If WebApiConfig is not present by default then you may have to add it.

Next you need to decorate your controller with [EnableCors] annotation, say my web page is at localhost:8080, just decorate it as : 

[EnableCors(origins: "http://localhost:8080", headers: "*", methods: "*")]
public class LoginApiController : ApiController
{ 
   ..... 
}

you could also allow any site to access your API by using * wildcard

[EnableCors(origins: "*", headers: "*", methods: "*")]

you need to learn more about CORS. You also need to address the security aspect of CORS.

Upvotes: 1

Related Questions