title: How to fix "Access to XMLHttpRequest at 'http://localhost:51255/token' from origin 'http://localhost:4200' has been blocked by CORS policy
body: <p>I try to communicate between dotnet webapi project and angular6 project.</p>
  
  <p>Scenario: when I enter loginname and password and click login button, it should fetch access_token, username from server and display the result in displayresult.html.
  I Know this question is asked previously, but even after trying with all those 
  solutions, I could not communicate my angular6 project with dotnetwebapi.</p>
  
  <p>To fix CORS policy, I did some of the changes in my dotnetwebapi project.</p>
  
  <ol>
  <li><p>Added <code>app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);</code> in  <code>ConfigureAuth(IAppBuilder app)</code> of <code>startup.auth.cs</code>.</p></li>
  <li><p>In <code>web.config</code>, added custom headers, please see the code below.</p></li>
  </ol>
  
  <p>authservice.ts</p>
  
  <pre><code>export class AuthService
  {
  private TokenAPI="http://localhost:51255/token";
      login(username:string,password:string):Observable&lt;TokenParams&gt;
      {
          var headersfortokenapi = new Headers({'Content-Type':'application/x-www-form-encoded'});
          var data="grant_type=password&amp;username=" + username + "&amp;password=" + password;
  
          return this.objhttp.post(this.TokenAPI,data,{ headers:headersfortokenapi})
          .pipe(
              map(res=&gt;res.json()
               )
              );      
      }
  }
  </code></pre>
  
  <p>Login.component.ts</p>
  
  <pre><code>
   OnLoginClick()  
  {   
  this.objauthservice.login(this.username,this.password)
  .subscribe
  (
   data=&gt;
    {
      this.tokenparam=data;
     this.objauthservice.AccessToken=this.tokenparam.access_token;
      this.objroute.navigate(['/Displayproducts']);
    }
  ) 
   }
  </code></pre>
  
  <p>When I click login button in login page, it goes to the above method and it calls authservice login method.
  Now i have created <code>TOKENWEBAPIPROJECT</code> dotnet project.
  This project is running in <code>http://localhost:51255/token</code>.
  The code snippet where I did some changes in <code>TOKENWEBAPIPROJECT</code>.</p>
  
  <p>startup.cs</p>
  
  <pre><code> public void ConfigureAuth(IAppBuilder app)
          {
  //it has the default code for connecting to dbcontext and application
   app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
  }
  </code></pre>
  
  <p>web.config</p>
  
  <pre><code>&lt;system.webServer&gt;
      &lt;httpProtocol&gt;
        &lt;customHeaders&gt;
       &lt;add name="Access-Control-Allow-Origin" value="http://localhost:4200" /&gt;
   &lt;add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS,token"/&gt;
   &lt;add name="Access-Control-Allow-Headers" value="Origin, application/x-www-form-encoded, Content-Type, X-Auth-Token" /&gt;
        &lt;/customHeaders&gt;
      &lt;/httpProtocol&gt;
  &lt;/system.webServer&gt;
  </code></pre>
  
  <p>I tested the post request of <code>http://localhost:51255/token</code> in Postman.
  Here I send username, password, grant_type=password and it returns me correct access_token, username, token_type etc.</p>
  
  <p>Expected: when I enter loginname and password and click login button, it should fetch access_token, username from server and display the result in <code>displayresult.html</code>.</p>
  
  <p>Actual: Instead I am getting the following Errors:-
  1. <code>OPTIONS http://localhost:51255/token 400 (Bad Request)</code></p>
  
  <ol start="2">
  <li><code>Access to XMLHttpRequest at 'http://localhost:51255/token' 
  from origin 'http://localhost:4200' has been blocked by CORS policy: 
  Response to preflight request doesn't pass access control check: It does not have HTTP ok status.</code></li>
  </ol>