title: Angular Service HttpClient API requests 404 in production, but not locally
body: <p>I have an Angular web app, and a backend Node JS API, both hosted on Azure in Web Apps. I have used postman to verify that the API is running correctly. My local Dev version of the Angular app also currently points at the live API, and the requests work as expected. However, the deployed Angular App only returns 404's when making requests to the API.</p>
  <p>I have the following proxy.confg.json:</p>
  <pre><code>{
  &quot;/api/*&quot; : {
      &quot;target&quot; : &quot;https://{domain}.azurewebsites.net&quot;,
      &quot;pathRewrite&quot;: {
          &quot;^/api&quot; : &quot;&quot;
      },
      &quot;secure&quot;: false,
      &quot;changeOrigin&quot;: true,
      &quot;logLevel&quot;: &quot;debug&quot;
  }
  </code></pre>
  <p>I have configured the proxy for use in production builds in angular.json as follows:</p>
  <pre><code>&quot;serve&quot;: {
        &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
        &quot;configurations&quot;: {
          &quot;production&quot;: {
            &quot;browserTarget&quot;: &quot;{project}:build:production&quot;,
            &quot;proxyConfig&quot; : &quot;proxy.conf.json&quot;
          }
  </code></pre>
  <p>When running locally using the proxy.confg.json (both &quot;ng serve&quot; and &quot;ng serve --configuration production&quot;, API requests work as expected. However, the live app gives me the following two errors in the browser console:</p>
  <pre><code>XHR GET https://{domain}.azurewebsites.net/api/getData
  Object { headers: {…}, status: 404, statusText: &quot;Not Found&quot;, url: &quot;https://{domain}.azurewebsites.net/api/getData&quot;, ok: false, name: &quot;HttpErrorResponse&quot;, message: &quot;Http failure response for https://{domain}.azurewebsites.net/api/getData: 404 Not Found&quot;, error: &quot;The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.&quot; }
  </code></pre>