title: Preflight response is not successful
body: <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>