Angular - Not able to access web server running on different devices(ip address) with http.get request

1

@angular.
I want to access different devices web server depending on user input(user specify the ip address) depending on that ip address provided by user i create the http request - for example if user provide ip address as 10.234.1.2 then my request is http://10.234.1.2/api/get/elm?=STATE(request changes depend on ip). if i set proxy in JOSN file with remote = “http://10.234.1.2” then it works fine.i getting response. but i want to dynamically handle ip address.

Request code -

Header - >
    headers = new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + btoa("admin:Abcd1234@") ,
        'Access-Control-Allow-Origin': "*"
      });
Request ->
       return this._http.get<IEmployee[]>("http://10.232.5.213/api/get/data?elm=STATE",{headers: this.headers})
          .pipe(
            catchError(err => {
              console.log('Handling error locally and rethrowing it...', err);
              return throwError(err);
          })
          );

How to set that ip address to config.json dynamically depends on user input or any other solution

For running in java script i set corporate proxy using -

let request = require('request');  
var proxiedRequest = request.defaults({'proxy': proxyUrl});

if i try to set it in proxy.config.json

{
    "/api" : {
        "target" : "http://proxy.company.com:8080",
        "secure" : false,
        "changeOrigin": true
    }
}

First problem - - I get CORS issue. Access to XMLHttpRequest at
… has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Second problem - if i set header to request then Request is send as OPTION protocol not get request and server reject the request with “Not Implemented”

2

So there’s a few concerns here.

  1. The proxy-config file is primarily used for development to just proxy requests during development the act of proxying requests will need to be performed by an actual web server during production.

  2. I’m not 100% sure if you specify when you want to proxy a request to a different IP dynamically, but you may need to write a custom proxy server in nodejs, have Angular’s proxy redirect to your custom server, which will again redirect the request accordingly.

  3. CORS issues are usually problems related to the server’s security and the browser it sounds as though you are actually just requesting the server from the client, which usually doesn’t work due to cors. To work around this you shouldn’t call the server-ip from the client (or fiddle around with the server’s CORS security, which isn’t usually the best idea), rather you should call the proxy server (/api/*) from your client and have the proxy server/back-end redirect your request accordingly.

  4. CORS exists to prevent 1 client-side page on domain A (localhost) from sending data to domain B (the other ip/server). Its security built into the browser that can be overridden on the server-side, but that usually isn’t the best idea.

  5. Your second problem sounds like a work around you tried wont work as the back-end wont accept that request.

I recommend figuring out how your going to request data from another server via the proxy and how-ever your going to run this in production. Do not use the angular dev server for production. You should have your client-side not know anything about where its getting the data in terms of what domains to call and ips. Leave that information up to the back-end proxing requests.