title: Angular 5 call AzureAD protected WebAPI results in CORS
body: <p><strong>Environment</strong></p>
  
  <ul>
  <li>Angular 5 frontend</li>
  <li>ASP.NET WebAPI 2 </li>
  <li>AzureAD authentication on WebAPI</li>
  </ul>
  
  <p><em>Configuration</em></p>
  
  <ul>
  <li>WebAPI is CORS enabled for everyone (***)</li>
  <li>AzureAD is OAuthImplicitFlow as enabled</li>
  <li>Angular and WebAPI are hosted in same IIS, different ports</li>
  </ul>
  
  <p><strong>Challenge</strong></p>
  
  <p>When WebAPI is called directly via browser, AzureAD auth challenge works fine and call gets authorized. However when Angular calls the WebAPI, AzureAD's auth challenge throws a CORS issue.</p>
  
  <p>The Angular app <em>will not</em> call Azure directly (via adal-angular), its supposed to call via WebAPI only.
  Angular app is successfully calling non-protected GET/POST functions on WebAPI successfully, so Angular-WebAPI connectivity is fine.</p>
  
  <p>(<strong>Update 1</strong> <em>Angular APP calls ADAL-ANGULAR to authenticate with Azure and get a token, then same token is passed as bearer to WebAPI</em>)</p>
  
  <p>Any thoughts what I am missing out here ? Any specific code/configuration can be made available as required.</p>
  
  <p><strong>Code</strong></p>
  
  <p><em>WebAPI</em></p>
  
  <pre><code>    [HttpGet]
      [Authorize]
      [Route(ApiEndPoint.AzureAD.GetMyProfile)]
      public async Task&lt;ADUser&gt; GetUserProfile()
      {
          ADUser user = null;
  
          GraphFacade graphFacade = new GraphFacade(this.graphServiceClient);       
          user = await graphFacade.GetMyProfileDetails();
  
          return user;
      }
  </code></pre>
  
  <p><em>Angular</em></p>
  
  <pre><code>  Authenticate(): Observable&lt;any&gt; {
      this.authServerUrl = "https://localhost:44371/";   // This is where WebAPI is running
      let httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
      let authRequest = this._http.get&lt;any&gt;(this.authServerUrl + '/api/aduser/profile', httpOptions);
      return authRequest;
    }
  </code></pre>
  
  <p><em>Error Message</em></p>
  
  <blockquote>
    <p>Failed to load
    <a href="https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=fba45f7b" rel="nofollow noreferrer">https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=fba45f7b</a>
    : 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.</p>
  </blockquote>