asp.net web api - No 'Access-Control-Allow-Origin' header when retrieven data from WebApi to angular 2 application -

i trying retrieve data webapi project have created. have build new angular 2 application, going data through api call.

already have made data ready in webapi project. if use postman call api, data example:

[ {   "id": 1,   "bookingnr": "123456789",   "outbounddate": "2016-02-05t00:00:00",   "returndate": "2016-04-04t00:00:00",   "route": "oslo - stockholm",   "passengers": "1 adult , 1 child",   "vehicletype": "car 1.85m x 4.5m" }, {   "id": 2,   "bookingnr": "234567891",   "outbounddate": "2016-03-05t00:00:00",   "returndate": "2016-04-04t00:00:00",   "route": "stockholm - oslo",   "passengers": "2 adult , 1 child",   "vehicletype": "car 1.85m x 4.5m" } ] 

in angular 2 project, have main component, calls service data api.

main component:

    @component({     selector: 'reservation-component',     providers: [...form_providers, bookingsservice],     directives: [...router_directives, core_directives, bookingslistcomponent ],     styles: [`         agent {             display: block;         }     `],     pipes: [],     template: `        ***no html in example***   `,   bindings: [bookingsservice], })  @injectable() export class bookingscomponent {      bookings: array<amendmentbookings> = [];      constructor(public bookingsservice: bookingsservice) {          this.bookings = this.bookingsservice.getbookings();      }  } 

then there service, makes call.

service

    @injectable() export class bookingsservice {      constructor(private router: router, public http: http) {         console.log('booking service created.', http);     }      getbookings(): array<amendmentbookings> {          var bookingsretrieved: array<amendmentbookings>          this.http.get('http://localhost:55350/api/bookings')             .map(res => res.json())             .map((bookings: array<any>) => {                 let result: array<amendmentbookings> = [];                 if (bookings) {                     bookings.foreach(booking => {                         result.push(                             new amendmentbookings(                                 booking.bookingnumber,                                 new date(booking.outbounddate),                                 new date(booking.returndate),                                 booking.route,                                 booking.passengers,                                 booking.vehicletype))                     });                 }                  return result;              }).subscribe(data => {                 bookingsretrieved = data;                 console.log(bookingsretrieved)             },             err => console.log(err));          return bookingsretrieved;     }  }  export class amendmentbookings {      constructor(         public bookingnumber: string,         public outbounddate: date,         public returndate: date,         public route: string,         public passengers: string,         public vehicletype: string     ) { } } 

when try call it, following error:

xmlhttprequest cannot load http://localhost:55350/api/bookings. no 'access-control-allow-origin' header present on requested resource. origin 'http://localhost:3000' therefore not allowed access.

have tried search problem, can find blocking request, no solution it..

this how bookingscontroller looks in visual studio (i'm using entity framework)

bookingcontroller

public class bookingscontroller : apicontroller {     private bookingscontext db = new bookingscontext();      // get: bookings     public ienumerable<booking> get()     {         return db.bookings.tolist();     } } 

you need enable cors on web api if want able call javascript code hosted on different domain.

so in web api bootstrap script call:

config.enablecors(); 

and decorate controller proper attribute:

[enablecors(origins: "*", headers: "*", methods: "*")] public class bookingscontroller : apicontroller {     ... } 

of course enabling cors domains (*) comes security implications might want selectively enable domain on javascript calling code hosted.