Preflight response is not successful
<p>I'm developing a web application with angular that sends a request to my Azure API. The API is protected by angular. When I call the url in the browser, I get redirected to the microsoft login page. After the login I come back to the API. </p>

<p>Now, I want to send a request to the API from my angular app:</p>

<pre><code>const auth = btoa("[my username]:[my password]");
headers = {"Authorization": "Basic " + auth};

$http.get("http://[webapp name].azurewebsites.net/api/contacts", {headers: headers}).then(function (response) {
    console.log("!!!LoggedIn!!!");
});
</code></pre>

<p>I added the [webapp name].azurewebsites.net to my CORS in the azure portal.
When I execute this, I get the error: </p>

<blockquote>
  <p>[Error] Failed to load resource: the server responded with a status of
  400 (Bad Request)</p>
  
  <p>[Error] Failed to load resource: Preflight response is not successful</p>
  
  <p>[Error] XMLHttpRequest cannot load <a href="http://[webapp" rel="noreferrer">http://[webapp</a> name].azurewebsites.net/api/contacts</p>
</blockquote>

<p>azurewebsites.net/api/contacts. Preflight response is not successful</p>

<p>Any idea how to fix it?</p>

<p><strong>UPDATE</strong></p>

<p>I tried it again with this code: </p>

<pre><code>const auth = btoa("[my username]:[my password]");
var config = {headers:  {
              'Authorization': 'Basic ' + auth,
              "Origin": "http://[webapp name].azurewebsites.net/api/contacts",
              "Access-Control-Request-Method": "GET",
              "Access-Control-Request-Headers": "X-Custom-Header"
              }
};

$http.get("http://[webapp name].azurewebsites.net/api/contacts", config).then(function (response) {
    console.log("!!!LoggedIn!!!");
});
</code></pre>

<p>Now I'm getting these errors: </p>

<blockquote>
  <p>Refused to set unsafe header "Origin"</p>
  
  <p>Refused to set unsafe header "Access-Control-Request-Method"</p>
  
  <p>Refused to set unsafe header "Access-Control-Request-Headers"</p>
  
  <p>Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested
  resource. Origin 'null' is therefore not allowed access. The response
  had HTTP status code 400</p>
</blockquote>

<p>When I delete these "unsafe headers" the last error message is still there.</p>

<p>Why does Origin is null automatically?</p>