title: Receiving 401 status with Safari while loading a an angular webpage only for the first time
body: <p>PROBLEM</p>
  
  <p>When using Safari as a browser, rather than Chrome, we receive a 401 status when we load our web application home page,this only happens for the first time on that tab,when we open a new tab and reload the application it loads fine.</p>
  
  <p>The technologies we are using are MEAN stack,all is fine when we use Chrome/Firefox as our browser (no 401 error is given and authentication seems to be fine), but when we switch to Safari, it does not work. </p>
  
  <p>I looked a similar post <a href="https://stackoverflow.com/questions/50515514/receiving-401-status-with-safari-not-chrome-in-react">Receiving 401 status with Safari not Chrome in React</a> on SO and ensured the endpoints have front slashes</p>
  
  <p>API calls</p>
  
  <pre><code>get_change_lifecycle_data(){
      const params = new HttpParams().set('params', this.enteredValue);
      this.http.get('https://change-life-cycle.region02.hoster.company.com/api/change_life_cycle/',{params})
          .subscribe(response =&gt; {
          console.log("change data:");
           console.log(response);
           this.newPost = response
          //  this.splice_gerrits();
       });
  }
  </code></pre>
  
  <p>FAILED REQUEST:</p>
  
  <pre><code>Summary
  URL: https://bati.company.com/runtime-es2015.858f8dd898b75fe86926.js
  Status: 401 Unauthorized
  Source: Network
  
  Request
  Origin: https://bati.company.com
  Accept: */*
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) companyWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15
  Referer: https://bati.company.com/
  
  Response
  Content-Type: text/html
  Date: Tue, 20 Aug 2019 00:02:58 GMT
  Connection: keep-alive
  Server: companyHttpServer/54b48526
  Content-Length: 207
  X-B3-TraceId: b39ab56a5e87f4f0
  Strict-Transport-Security: max-age=31536000
  Www-Authenticate: Basic realm="Enter your company OD credentials"
  </code></pre>
  
  <p>SUCCESSFUL REQUEST AFTER OPENING A NEW TAB:</p>
  
  <pre><code>Summary
  URL: https://bati.company.com/runtime-es2015.858f8dd898b75fe86926.js
  Status: 200 OK
  Source: Memory Cache
  
  Request
  No request, served from the memory cache.
  
  Response
  ETag: "5d5b0e97-5a0"
  Content-Type: application/x-javascript
  Date: Tue, 20 Aug 2019 00:01:36 GMT
  Last-Modified: Mon, 19 Aug 2019 21:03:19 GMT
  Server: companyHttpServer/54b48526
  Content-Length: 1440
  Connection: keep-alive
  Accept-Ranges: bytes
  X-B3-TraceId: ecc642668834014e
  Strict-Transport-Security: max-age=31536000
  </code></pre>
  
  <p>UPDATE:--</p>
  
  <p>I was able to replicate the problem by sending a curl request ,I get a 401 error response</p>
  
  <pre><code>curl 'https://bati.company.com/runtime-es2015.858f8dd898b75fe86926.js' \
  -XGET \
  -H 'Origin: https://bait.company.com' \
  -H 'Accept: */*' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) companyWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15' \
  -H 'Referer: https://bait.company.com/'
  </code></pre>
  
  <p><strong>401 error response</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;401 Authorization Required&lt;/title&gt;&lt;/head&gt;
  &lt;body bgcolor="white"&gt;
  &lt;center&gt;&lt;h1&gt;401 Authorization Required&lt;/h1&gt;&lt;/center&gt;
  &lt;hr&gt;&lt;center&gt;CompanyHttpServer/54b48526&lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>UPDATE2:</strong></p>
  
  <pre><code>curl -u username:password 'https://bati.company.com/runtime-es2015.858f8dd898b75fe86926.js' -XGET -H 'Origin: https://ibait.apple.com' -H 'Accept: */*' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15' -H 'Referer: https://ibait.apple.com/'
  </code></pre>
  
  <p><strong>UPDATE3:</strong></p>
  
  <pre><code>api_change_foldscore_data(){
      const username = 'username'; // need to get these values from X-Forwarded-User
      const password = 'password';
      const headers = new HttpHeaders({
        Authorization: 'Basic ' + btoa(username + ':' + password)
      });
      this.http.get('https://change-life-cycle.hoster.company.com/api/change_fold_score', {headers, params})
          .subscribe(response =&gt; {
          console.log("change data:");
           console.log(response);
           this.newPost = response
       });
  }
  </code></pre>