Angular API call is not hitting in controller method

Question

I am not able to hit my controller method Get.

I have register.component.ts file in this I am calling dataservice's getfeed method:

ngOnInit() {
this.dataservice.getFeed('register').subscribe(result => {
}

in the data.service.ts file, I have written like:

@Injectable()
export class DataService {
constructor(private http: HttpClient) { }

getFeed(methodName: string): Observable<any> {

return this.http.get(environment.baseApiUrl + methodName);
}
}

In My environment.ts file I have:

 baseApiUrl:'http://localhost:4200/api/'

And finally in RegisterController.cs I coded like:

[ApiController]
[Route("[controller]")]
public class RegisterController : ControllerBase
{
    [HttpGet]
    [ProducesResponseType(400)]
    [ProducesResponseType(typeof(string), 500)]
    public async Task<IActionResult> Get()
    {
    }
}

But this Get is not hitting no way. I tried different URL directly from browser, but nothing is hitting in that get method. Any idea what I am missing in my implementation?

And in my Startup.cs file i have something like this:

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(name: "default", pattern: "{controller}/{action=index}/{id?}");
        });

is register in register.component.ts a variable with value of string 'register'? Right now you call this.dataservice.getFeed(register), did you mean to pass it as a string this.dataservice.getFeed('register')? Also what port is the api running in development? You are pointing the http request to port 4200 which is where angular in development runs, wouldn't it need to be pointed to the port of the api? — Alexander Staroselsky
– Alexander Staroselsky, Commented Dec 17, 2020 at 17:41
@NithinPaul Check developer console on your web browser to see if there are any error or CORS issue. — Rahul Sharma
– Rahul Sharma, Commented Dec 17, 2020 at 17:46

Rahul Sharma · Accepted Answer · 2020-12-18 10:44:12Z

1

In order to resolve your CORS issue, you can do the following in your web.config file:

Under <system.webServer> section, place the following to enable CORS globally in your project:

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

answered Dec 18, 2020 at 10:44

Rahul Sharma

8,3772 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Nithin Paul Over a year ago

Rahul in my web.config i have specified this like <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Credentials" value="true"/> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, OPTIONS" /> </customHeaders></system.webServer> But still i am getting this same error

Nithin Paul Over a year ago

When i try using direct URL i am able to hit my service api method, but when i call it using angular i am not. Do i need to do anything in client angualr side?

Rahul Sharma Over a year ago

@NithinPaul No you do not need to do anything on client side.Maybe you need to restart your IIS for the changes to reflect.

Nithin Paul Over a year ago

Ok also do i need to remove this <handlers> tag from <system.webServer> section? Because in my cors error its showing like it does not have ok status, so when i googled it its mentioned by someone

Nithin Paul Over a year ago

Rahul now its getting hit in my service side :), i removed that handler section completely Thanks for your help :)

|

derstauner · Accepted Answer · 2020-12-17 18:43:20Z

If I unterstand you correctly, you want to call the api controller http://localhost:4200/api/register.

In order to do this make the following:

Change your controller code like this:

 [ApiController]
 [Route("api")]
 public class RegisterController : ControllerBase
 {
     [HttpGet("register")]
     [ProducesResponseType(400)]
     [ProducesResponseType(typeof(string), 500)]
     public async Task<IActionResult> Get()
     {
     }
 }

Get rid of the localhost and port number, you won't need it:
```
 baseApiUrl:'api/'
```

Your getFeed method shoud look like this without parameter:

getFeed: Observable<any> {
    return this.http.get('api/register');
}

Or, I think, it should work too if you just change the baseApiUrl like above. Give it a try.

Andrew · Accepted Answer · 2023-08-29 20:03:43Z

0

Today, make example if controller do not work - check proxy.conf.js, if you have 404 error

   const PROXY_CONFIG = [
     {
          context: [
          "/weatherforecast",
           "/salary",
           "/data",
      ],

answered Aug 29, 2023 at 20:03

Andrew

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Angular API call is not hitting in controller method

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related