how can I put api key in the back when i call api from angular

Question

In my current Agular app im sending a request to back end and i need to add api key as below:

         let header = new HttpHeaders()
        header = header.append("api-key","jkhjkh") 
        this.http.get(`https://api/${"EUR"}+${"SEK"}`,{headers:header}).subscribe(s=>{....

the problem is im exposing the api key to the user,its shown on the browser which is not secure,i was seraching on the google and found they say you have to put api key on the backend,if i do that how can i call then?please help me with an example or suggestion

Answer 1

You need to keep the API-key away from the Angular frontend. If you have an dotnet core backend, create a controller there that wraps your call to the API (with for example HttpClient ) and returns the response.

Angular <-> backend <-> API 
                    key

Instead of

Angular <-> API 
        key