title: angular proxy configuration for development and production
body: <p>when I import <code>HttpClient</code> to call my own written node.js API, there are some issues with the settings of the URL.</p>
  
  <p>for example:</p>
  
  <pre><code>import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  export class myComponent implements OnInit {
  
      constructor(
      private http: HttpClient,
      ) {}
  
      ngOnInit(): void {
         this.http.get('http://127.0.0.1:3000/getData/theme').subscribe(data =&gt; {
  
         });
      });
  }
  
  //angular default port 4200,
  //node.js default port 3000,
  </code></pre>
  
  <p>when I set <code>this.http.get('/getData/theme')</code> the <code>get</code> will be call <code>http://127.0.0.1:4200</code>, this is wrong.
  if I set <code>this.http.get('http://127.0.0.1:3000/getData/theme')</code> for local development  it works. but, when <code>ng build</code> setting to actual server, it can't connect properly.</p>
  
  <p>the console:</p>
  
  <pre><code>GET http://127.0.0.1:3000/getData/theme 
  net::ERR_CONNECTION_REFUSED
  
  GET http://localhost:3000/structureData/themeData 
  net::ERR_CONNECTION_REFUSED
  </code></pre>
  
  <p>How can I set the correct URL to allow it to meet both online and local development status?</p>
  
  <hr>
  
  <p><a href="https://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server">angular-cli server - how to proxy API requests to another server?</a></p>
  
  <p>I set the package.json:</p>
  
  <pre><code>"start": "ng serve --proxy-config proxy.conf.json"
  </code></pre>
  
  <p>and </p>
  
  <pre><code>proxy.conf.json
  {
    "/api": {
      "target": "http://localhost:3000",
      "secure": false
    }
  }
  </code></pre>
  
  <p>it's not working:</p>
  
  <p><code>this.http.get('/getData/theme')</code></p>
  
  <pre><code>GET http://localhost:4200/getData/theme 404 (Not Found)
  </code></pre>
  
  <p>or</p>
  
  <p><code>this.http.get('/api/getData/theme')</code></p>
  
  <pre><code>GET http://localhost:4200/api/getData/theme 404 (Not Found)
  </code></pre>