get api from dropdown values

Saravanan Np

7y994Angular

How to get dropdown values through from angular api??

below shared my code, could u guys help me please

App.Component.ts

constructor(private httpService: HttpClient){}
myInsuredTypes: string[];
selected = null;
ngOnInit () {
this.httpService.get('http://192.168.1.51/masterapi/api/GetInsurance').subscribe(
data => {
this.myInsuredTypes = data as string []; // FILL THE ARRAY WITH DATA.
},
(err: HttpErrorResponse) => {
console.log (err.message);
}
);
}

App.component.html

"float:left;padding:10px;margin:0 auto;">
"selected">
"description">{{description}}
{{ selected }}

App.module.ts

// API Section
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

Errors comes

Access to XMLHttpRequest at 'http://192.168.1.51/masterapi/api/GetInsurance/' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Saravanan Np7y ago
Hi Puneet Kankar,

Your references is better understanding clearly for CORS. I did fixed partially through on my browser extension. i will do without that extension with web api service side.

Thank you Puneet Kankar.

Regards,

Saravanan N
0
Saravanan Np7y ago
Hi Mohd Kashif,

Your references is working fine. i did fixed partially through browser extension. i will do this through services.

Thank you Kashif.

Regards,

Saravanan N
0
Puneet Kankar7y ago
hi Saravanan,

first, install given below namespace from NuGet Package Manager.

Microsoft.AspNet.WebApi.Cors

and add given below code in web.config file.

config.EnableCors()

check below link for better understanding.

https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

also, add the extension for chrome browser

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

+1
Mohd Kashif7y ago
Hi Saravanan,

This is common issue when we are calling web api(services) to get the data. To handle this issue you need to follow below step:-

- You need to handle CORS issue on service side.

OR

- Go to browser extension and add 'allow-control-allow-origin' extension and enable it. your issue will be resolved but this is not good practice.

Best practice - You should always handle your CORS in service side.

I hope this will be helpful.

Thanks

Kashif
+2
Rajeesh Menoth7y ago
Hi, This is cors issue like to different port communication or domain. Please check the following article. https://www.c-sharpcorner.com/article/making-proxy-request-in-angular-fix-cors-issue-in-angular-application/
+1