How to use angular4.x's httpclient to access. NET Webapi

Online access to a lot of articles, basic writing is not very complete, tidy up.

Two aspects of. NET Webapi and angular are described.

First,. NET WEBAPI Configuration

. NET Webapi, the main problem is to solve cross-domain problems.

1, modify the system.webserver in the Web.config file

<system.webServer> <modules runallmanagedmodulesforallrequests= "true" > <remove name= "webdavmodule "/> </modules>  
2, modify the Global.asax.cs file, in the global class, add the Application_BeginRequest () method, the code is as follows:

        protected void Application_BeginRequest ()
        {
            var list = new list<string> (Request.Headers.AllKeys);
            if (list. Contains ("Origin") && Request.httpmethod = "Options")
            {
                response.end ();
            }
        }
 
3, attached to the official tutorial "Tour of Hero" Webapi code, (only to do test calls, modify and other operations will not take effect):

Namespace Apiforangular.models
{public
    class Hero
    {public
        int id {get; set;}
        public string name {get; set;}}}
 
        
Namespace Apiforangular.controllers {    [System.Web.Mvc.Route ("Api/[controller]")]     Publ IC class Herocontroller:apicontroller     {        [HttpGet]         Public list 
Second, angular call method

First, it is important to note that if you use the tutorial code for Tour of Hero, you need to remove all references to memory Webapi, that is, to remove all the content associated with Inmemorywebapimodule.



My hero.service.ts file is as follows: (where Heroesurl is configured as the address and name of the WEBAPI it publishes)

Import {injectable} from ' @angular/core '; Import {Hero} from ' ...
/models/hero ';
Import ' rxjs/add/operator/topromise ';

Import {httpclient, httpheaders} from ' @angular/common/http '; @Injectable () Export class Heroservice {private Heroesurl = ' http://**address of Ip or website**/**application name**/a
  Pi/**name of api** ';
  Private headers = {Headers:new httpheaders ({' Content-type ': ' Application/json '})}; Constructor (private httpclient:httpclient) {} getheroes (): promise