Issue in angularjs2 with restful web API

Question

I am doing AngularJS2 with Restful web API , and getting some console errors while calling HTTP post. Errors are listed below,

Hope you help

Controller code snippet

namespace SoomWebApi.Controllers
{
    [EnableCors(origins: "http://localhost:64336", headers: "*", methods: "*")]
    public class UserController : ApiController
    {

        public HttpResponseMessage UserLogin([FromBody] LoginRequestData objValidate)
        {
            UserModelManager _UserModelManagerr = new Models.UserModelManager();

            return Request.CreateResponse(HttpStatusCode.OK, _UserModelManagerr.Login(objValidate), GetJSONFormatter());

        } 
    }
}

Webapiconfig code snippet

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.EnableCors();

        // Web API routes
        config.MapHttpAttributeRoutes();

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

Refer [Old Post](http://stackoverflow.com/questions/35721206/how-to-enable-production-mode-in-angular-2) that will help you solve first error.. — MarmiK, Jan 02 '17 at 09:53

federico scamuzzi · Accepted Answer · 2016-12-30T09:29:22.037

0

It look like a CORS problem .. try to put in your Startup.cs file in WebAPI something like:

 using Microsoft.Owin;
using Owin;

 public void Configuration(IAppBuilder app)
        {
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
            ConfigureAuth(app);

        }

If you want to limit to some specific host ..try something like:

  var corspolicy = new corspolicy
            {
                allowanymethod = true,
                allowanyheader = true,
                supportscredentials = true,
                origins = { "http://www.example.com", "http://localhost:38091", "http://localhost:39372" }

            };

            app.usecors(new corsoptions
            {
                policyprovider = new corspolicyprovider
                {
                    policyresolver = context => task.fromresult(corspolicy)
                }
            });

edited Dec 30 '16 at 09:29

answered Dec 30 '16 at 09:21

federico scamuzzi

3,708
1
17
24

Allow all is good for a dev environment, but do appropriate config in production mode. – gvmani Dec 30 '16 at 09:24
created a Startup.cs insideApp_Start folder ,and included your code.But couldn't find any extention like UseCors – NIMISHA Dec 30 '16 at 10:41
you don't have to create it... webapi asp.net scaffolding do it for you (int inside app_start..but in root path) .. and you need to install Nuget packages ..try to type in nuget UI ...owin CORS – federico scamuzzi Dec 30 '16 at 10:43
no you put it not in the correct file and in the correct way – federico scamuzzi Dec 30 '16 at 11:14

score 0 · Answer 2 · answered Dec 30 '16 at 09:30

Your server should support CORS to allow access from different domains. Update your server configuration to allow only predefined set of domains to allow access.

Access-Control-Allow-Origin: "domains"

If you have this problem on debug only and do not plan use CORS after deploy - mostly local web server starts your Angular application on localhost:some-port and server deployed on localhost also - use IE for debugging - it works good even when your angular middleware and backend works on different ports.

score 0 · Answer 3 · answered Dec 30 '16 at 09:36

0

If the code in production will be on the same domain as REST API, you can install chrome extension to avoid CORS error:

Chrome CORS extension

answered Dec 30 '16 at 09:36

Igor Janković

5,494
6
32
46

Issue in angularjs2 with restful web API

3 Answers3