title: Access to XMLHttpRequest at "http://...." origin 'http://localhost:4200' has been blocked by CORS policy
body: <p>i am trying to call an api where i got stuck with the CORS error.</p>
  
  <p>when i tried with "https://...." , i hit the following error with service being failed. </p>
  
  <p>status Code: 422.</p>
  
  <p>OPTIONS <a href="https://xyz/login?username=xxx&amp;password=xxx" rel="nofollow noreferrer">https://xyz/login?username=xxx&amp;password=xxx</a> 422 (Unprocessable Entity)
  Access to XMLHttpRequest at '<a href="https://xyz/login?username=xxx&amp;password=xxx" rel="nofollow noreferrer">https://xyz/login?username=xxx&amp;password=xxx</a>' from origin '<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>
  
  <p>when i tried with  "http://...." i get the following error. </p>
  
  <p>status Code: 307 Temporary Redirect</p>
  
  <p>Access to XMLHttpRequest at '<a href="http://xyz/login?username=xxx&amp;password=xxx" rel="nofollow noreferrer">http://xyz/login?username=xxx&amp;password=xxx</a>' from origin '<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.</p>
  
  <p>I tried adding headers but the added headers won't show on the browser.</p>
  
  <p>Request headers look like below:</p>
  
  <p>Provisional headers are shown
  Access-Control-Request-Headers: content-type
  Access-Control-Request-Method: POST
  Origin: <a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a>
  Referer: <a href="http://localhost:4200/login" rel="nofollow noreferrer">http://localhost:4200/login</a>
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36</p>
  
  <p>Please help me resolve the issue, </p>
  
  <p>my component.ts looks like this</p>
  
  <pre><code>import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators, FormBuilder } from '@angular/forms';
  import { ErrorStateMatcher } from '@angular/material/core';
  import { Router, ActivatedRoute } from '@angular/router';
  import { first } from 'rxjs/operators';
  
  import { AuthenticationService } from '../services';
  
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
  })
  export class LoginComponent implements OnInit{
    loginForm: FormGroup;
     returnUrl: string;
     error = '';
  
    constructor(
      private formBuilder: FormBuilder,
      private route: ActivatedRoute,
      private router: Router,
      private authenticationService: AuthenticationService) {}
  
      ngOnInit() {
         this.loginForm = this.formBuilder.group({
             username: ['', [Validators.required , Validators.email]],
             password: ['', [Validators.required]]
         });
  
         // get return url from route parameters or default to '/'
         this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
     }
  
     get f() { return this.loginForm.controls; }
  
      onSubmit() {
          this.authenticationService.login(this.f.username.value, 
              this.f.password.value)
              .pipe(first())
              .subscribe(
                  data =&gt; {
                      this.router.navigate([this.returnUrl]);
                  },
                  error =&gt; {
                      this.error = error;
                  });
      }
  
  }```
  
  and my authentication.service.ts looks like this 
  
  ``import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { map } from 'rxjs/operators';
  import { Http, Headers, RequestOptions, Response, ResponseContentType } from '@angular/http';
  
  @Injectable({ providedIn: 'root' })
  export class AuthenticationService {
  
      constructor(private http: HttpClient) { }
  
      login(username: string, password: string) {
        const httpOptions = {
         headers: new HttpHeaders({
                      'Content-Type': 'application/json',
                      'Access-Control-Allow-Origin': '*',
                      'Access-Control-Allow-Credentials': 'true'
         })
       };
          return this.http.post(`https://xyz/login 
                           username=xxx&amp;password=xxx, httpOptions)
              .pipe(map(user =&gt; {
                  if (user) {
                      // some logic
                  }
                  return user;
              }));
      }
  }```
  
  i want to resolve the CORS issue and make successful api call either from client side or from server side. Being fairly new to angular, any details/step by step instructions are appreciated.
  
  Also , i would want to know why added headers wont show on browser. Am i missing anything
  </code></pre>