Asp.net MVC5 with Angular 2 configuration

Question

I'm beginner in Angular 2. I'm creating Angular project using Angular CLI. I'm separately creating asp.net MVC Web api project.

• Using angular CLI to ng serve command start this service: localhost:4200
• MVC web api start this service: localhost:65320

When i use Angular http get request to download data from localhost:65320/api/myservice, Cross origin problem occurred. Because angular project using different url. But i'm adding header to Access-Control-Allow-Origin=* problem solved.

But when i use http post request always return 405 method not allowed problem occurred

Question:

• How to allow cross origin post request in web api controller?
• Or how to configure Angular CLI created project work together with MVC project?

Correct Answer:

Web api cross origin problem solved following this article: https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors suggest by @chandermani

Answer 1

You can enable CORS in Web API in two different ways:

1. Using Microsoft.AspNet.WebApi.Cors: follow tutorial https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api as Chandermani pointed out.

2. Add the following to your system.webServer element in your web.config:

   <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> </customHeaders> </httpProtocol>